在上传图片前实现图片预览

Vue中通过el-upload组件实现上传前预览本地图片 1、实现效果如下图所示 用户选择本地待上传的图片,选择成功后,上传组件隐藏,呈现本地预览组件,单击图片并实现图片的放大呈现 2、template(相当于html)部分的代码如下 代码实现逻辑: 在el-upload组件中,将auto-upload设置为false不会执行自动上传,给予on-change一个触发事件imgSaveToUrl,在imgSaveToUrl方法中用于生成可用于本... 阅读详情

 


解决思路:


在上传控件浏览到文件后通过 onpropertychange 事件改变隐藏图片的路径,如果文件是图片格式,正常显示,否则提示格式不正确。
具体步骤:

1.先插入一个上传表单控件和一隐藏的空白图片。

<input type="file" id="upload">
<img id="pic" style="display:none">

2.在上传控件的属性改变(本例中为选择文件后),设置隐藏图片的地址为所选择的文件地址。

<script for="upload" event="onpropertychange">   
pic.src=this.value
</script>

3.在隐藏图片加载完后显示。

<script for="pic" event="onload">
this.style.display=""    //以行内元素方式显示隐藏的图片
</script>

4.如果所选择文件不是图片格式或者路径不正确,触发onerror事件,隐藏图片并弹出警告框。

<script for="pic" event="onerror">
//当 id 为 pic 的对象在装载过程中发生错误时触发此段代码
this.style.display="none"   //隐藏图片
alert("所选文件并非图片,请重新选择")
</script>

5.完整代码。

<script for="upload" event="onpropertychange">   
//当 id 为 upload 的对象上的属性发生变化时调用此段代码
//设置隐藏图片的地址为上传控件框的值
pic.src=this.value
</script>

<script for="pic" event="onload">
//当 id 为 pic 的对象在装载完成时触发此段代码
this.style.display=""    //以行内元素方式显示隐藏的图片
</script>

<script for="pic" event="onerror">
//当 id 为 pic 的对象在装载过程中发生错误时触发此段代码
this.style.display="none"   //隐藏图片
alert("所选文件并非图片,请重新选择")
</script>

<input type="file" id="upload">
<img id="pic" style="display:none">

技巧:显示对象除了设置display为空,还可以设为 inline 和 block

特别说明:

本例通过用 onpropertychange 捕获对象的属性变化事件,onload 捕获图片加载 完成后的事件,onerror 捕获图片加载时的出错事件,并通过script标签的for和event属性绑定到对象,而实现的上传图片预览效果。
1. onpropertychange 当在对象上发生对象上发生属性更改时触发。
2. onload 在浏览器完成对象的装载后立即触发。
3. onerror 当对象装载过程中发生错误时触发。
4. event 设置或获取脚本编写用于的事件。
5. for 设置绑定到事件脚本的对象,再获取脚本所绑定到的对象是用 htmlFor 。

转自:http://blog.chinaunix.net/u1/41559/showart_1901488.html

uniapp+vant weapp实现图片上传前预览功能 在社区功能中,想要发布一个帖子,那么最好在本地预览得到图片数量然后通过循环一次上传,而不是直接上传.这里对组件进行了一些修改. html: <van-uploader :disabled="disable" :file-list="previewList" @after-read="previewImg" max-count="9" /> js: data() { return { text: "", school: "", disable: t 阅读详情

相关推荐

ASP.NET实现图片上传前预览技术

htmltable {th, td {th {pre {简介:在ASP.NET应用开发中,通过FileUpload控件和JavaScript实现用户上传图片前的预览功能,旨在提高用户体验、节约资源和提升效率。文章详细介绍了如何兼容主流浏览器来实现图片预览,并结合后端处理来确保上传文件的类型和大小符合要求。同时,文章还探讨了性能优化和安全性方面的最佳实践。

weixin_42360733的博客 395

Web前端 文件上载 input file 文件上传优化

在Web前端开发过程中,当项目做得越来越大时,文件上传功能也会被使用得非常多,之前项目经理反馈一个问题,就是当点击[选择上传文件]按扭时,弹出文件浏览框总是很慢,点击上传按扭后,要很久文件选择窗口才能弹出来,经过一翻折腾,后来发现是因为input file类型的标签中 没有限制指定可上传的文件类型 accept="*" (默认全部类型)。 所以它会检索全部类型,从而导致在弹出文件选择窗口时慢的问题。 然而,在HTML5中使用 input file控件 选择上传文件的时候,根据需要可限制指定的文件类型

沐枫 9647

某头部能源集团“数据治理”到“数智应用”跃迁案例剖析

本次案例能源企业实现了从“数据可用”到“指标驱动”再到“智能决策”的全链条升级,标志着集团在数字化、智能化治理能力上的系统跃升,构建起面向未来的数智管理新范式。

a958014226的博客 1258

vue给input file绑定函数获取当前上传的对象

HTML &lt;input type="file" @change="tirggerFile($event)"&gt; JS(vue-methods) tirggerFile : function (event) { var file = event.target.files; // (利用console.log输出看结构就知道如何处理档案资料) // do something...

weixin_34144848的博客 1649

C#与Lua交互原理

以前每一次研究一些新知识并且有所收获的时候,都想写一篇博客来分享这种自己的收获。 一直没有写主要是因为自己水平太菜了,怕写出来贻笑大方,最近想通了,想写就写下来,就算对别人毫无用处,还可以自己没事翻翻,省得自己都忘了。当然如果能对你有一丝丝的帮助,那真是再好不过了 。本文将针对C#与Lua的调用原理阐述一些个人的心得 。 Lua开发环境搭建 有关于VS &amp...

Hui Ye的博客 1万+

手把手教你用C++和NI-VISA写个简易仪器上位机(附QT工程配置)

本文详细介绍了如何使用C++和QT框架结合NI-VISA驱动开发跨平台仪器控制上位机软件。从Ubuntu环境配置、VISA通信核心架构设计到QT界面与业务逻辑解耦,提供了完整的实战指南和代码示例,帮助开发者快速构建专业级仪器控制程序。

weixin_42522374的博客 275

input file控件上传图片之前进行图片预览

在上传图片前能否实现图片预览 解决思路: 在上传控件浏览到文件后通过 onpropertychange 事件改变隐藏图片的路径,如果文件是图片格式,正常显示,否则提示格式不正确。 具体步骤: 1.先插入一个上传表单控件和一隐藏的空白图片。 &lt;input type="file" id="upload"&gt; &lt;img id="pic" style="display:non...

天道酬勤 252

零信任架构实战:“持续验证+动态授权”全流程解析(附策略引擎联动图)

《零信任实战指南:7图拆解核心流程与行业案例》摘要:本文通过7张架构图系统解析零信任五大核心流程:强身份认证、设备检查、动态授权、持续监控和自动降权。对比金融(重数据审计)与制造业(重物理绑定)的落地差异,指出三大常见误区及解决方案。数据显示,零信任可使安全响应提速60%,泄露成本降低45%。文章提供6个月实施路线图,强调零信任是"智能信任"体系,建议企业分阶段改造,优先保护核心系统。附赠金融/制造行业策略模板及甘特图示例。(149字)

sara_han的博客 779

input的type=file触发的相关事件

今天突然用到input相关的事件,突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了,所以,为了记恨自己,就写了相关与input相关的事件运行的过程。添加了一些相关的方法测试了一下。这一节首先介绍一个input的type=file的运行流程。 我们书写了mousedown,mouseup,click,input,change,focus,blur绑定到了input

现在学习也不晚 9万+

攀藤PMS系列传感器STM32驱动开发与数据解析实战

本文详细介绍了攀藤PMS系列传感器与STM32微控制器的驱动开发与数据解析实战,涵盖硬件连接、数据协议解析、驱动源码编写及数据处理优化。重点解析了传感器数据帧结构,提供了完整的STM32驱动实现代码,并分享了实际应用中的问题排查与性能优化经验,帮助开发者快速实现高精度颗粒物浓度检测。

milk8的博客 348

Android安全支付(1)-整体架构-keymint

(1)接口定义hardware/interfaces/security/keymint/aidl/android/hardware/security/keymint/IKeyMintDevice.aidl。keymint是keymaster v4之后的替代设计。所以android 15上最好采用keymint的接口进行硬件功能的对接。同时,我们会集成一款紫光的芯片。3.可以用keyStore.getKey()来获取存储在keyStore中的数据进行加密和解密。四、关于keymint的接口定义和具体实现。

Android系统开发-VR OS-系统安全隐私 1770

input文件选择框选择同一个文件并且触发事件

input[type=file]选择同一个图片/文件无法触发change或者input事件只需要把event.target.value = ''把原来的值制空就行。

kaQin0的博客 488

22、自动化地图制作与Pandas数据处理

本文介绍了在ArcGIS Pro中使用arcpy.mp模块进行自动化地图制作的关键技术,涵盖地图元素的访问、移动与文本修改,以及将布局批量导出为JPEG、PNG和PDF格式的方法。同时,文章深入探讨了Pandas在数据处理和地理空间分析中的应用,特别是Spatially Enabled DataFrames(SEDFs)的使用。通过综合案例展示了地图更新与数据清洗、分析的结合,提升了地图制作与数据处理的效率,为GIS自动化工作流提供了实用指南。

w8x9y0z1的博客 79

html 上传图片前预览,HTML实现图片上传前预览

HTML5 Upload#destination{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);}//处理file input加载的图片文件$(document).ready(function(e) {//判断浏览器是否有FileReader接口if(typeof FileRea...

weixin_29344197的博客 1299

学Simulink——基于Simulink的固态变压器(SST)多级协同控制​

本文介绍了基于Simulink的固态变压器(SST)多级协同控制系统设计与仿真方法。SST作为智能电网关键设备,包含AC-DC整流、DC-DC隔离和DC-AC逆变三级变换器。针对级间耦合问题,提出了能量-功率协同控制策略,通过纵向解耦和横向联动实现稳定运行。详细演示了在Simulink中搭建三级主电路、设计协同控制器(含电网定向控制、功率前馈和虚拟惯性控制)的全过程,并通过负载突变测试验证了系统动态性能(直流母线电压波动<2%)。最后给出了工程部署建议,包括数字控制延时补偿、启动序列设计和代码自动生成

xiaoheshang_123的博客 207

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

jq图片按钮上传图片_jquery实现图片上传前本地预览功能

这篇文章主要为大家详细介绍了基于jquery实现图片上传前本地预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用。直接上代码。html部分:input:fi...

weixin_32133403的博客 448

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

jquery php获得上传图片的路径,实现jquery上传图片前本地先预览

这次给大家带来实现jquery上传图片前本地先预览,实现jquery上传图片前本地先预览的注意事项有哪些,下面就是实战案例,一起来看一下。介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用。直接上代码。html部分:input:file事件是上传类型较常用的属性值如下:accept:表示可以选择的文件MIME类型,多个MIME...

weixin_30972263的博客 562

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

基于layUI的图片上传前预览功能的2种实现方式

上传页面采用了layui 的上传模块,要实现的功能:选择文件后---点击文件名,页面中间弹窗内预览图片,先看效果图: 预览功能的实现具体有2种方式:第一种是用blob+FileReader,第二种是layUI自带的。 1. 用layUI 自带的参数实现图片预览: layui.use('upload', function(){ ... choose: func...

weixin_30797199的博客 2567

实现图片上传前预览

jquery实现图片文件上传前预览功能 html代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;文件上传预览&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="file" onchange="pr

马冠亚的博客 330

【JS 实战案例】用 JS 实现图片预览功能(上传前预览)

本文手把手实现一个实用的 JS 图片上传前预览功能,支持多图选择、格式 / 大小校验、预览图删除等核心功能,适配 PC 和移动端。代码精简可复用,重点拆解 FileReader API、文件校验、DOM 动态生成等核心知识点,无冗余内容,贴合 优快云 高分行文逻辑,助力前端零基础新手快速掌握这个高频实用的表单交互技巧。 🏷 文章标签

阿雷编程实战 429

JS实现上传本地图片前先预览

<style type="text/css"> #preview /*这个就是预览的DIV的ID*/ { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } </style> &...

G19931112的博客 124

图片上传前预览实现

项目中用到图片上传前预览功能,在网上找了一些资料,终于实现了  现在记录下来供以后参考使用 此功能基于js代码,不需要引入任何js代码,操作步骤如下: 1、页面引入 html代码 //文件选择框 2、添加js代码  function setImagePreview() { var docObj=document.getElementBy

angel585的专栏 1371

html 上传图片前预览,Html5+Jquery实现图片上传前预览

以下代码实现了html5和jquery上传前预览,代码精炼。HTML5上传图片预览请选择图片文件:JPG/GIF $("#file0").change(function(){var objUrl = getObjectURL(this.files[0]) ;console.log("objUrl = "+objUrl) ;if (objUrl) {$("#img0").attr("src...

weixin_30199989的博客 205

javascript实现上传图片前的预览效果

 s cript>function yulan(){var fileext=document.form1.UpFile.value.substring(document.form1.UpFile.value.lastIndexOf("."),document.form1.UpFile.value.length)fileext=fileext.toLowerCase()if ((fileext!=

1282

HTML5上传图片前实现预览(超简单)

H5提供的API让图片预览变得非常简单,实现上传前预览图片 兼容性:在标准浏览器下(IE10+)使用 以下是代码: function html5Reader(file) { var file = file.files[0]; var reader = new FileReader(); reader.readAsDataURL(file);

bingfengjiyi23的博客 4049
上一篇: js、html中的单引号、双引号及其转义使用(转)
下一篇: DOJO遍历DataGrid数据并转换成json格式数据
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值