博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery实现图片上传前的预览
阅读量:7136 次
发布时间:2019-06-28

本文共 729 字,大约阅读时间需要 2 分钟。

html代码

 

js代码

$("#uploadImage").on("change", function(){    // Get a reference to the fileList    var files = !!this.files ? this.files : [];     // If no files were selected, or no FileReader support, return    if (!files.length || !window.FileReader) return;     // Only proceed if the selected file is an image    if (/^image/.test( files[0].type)){         // Create a new instance of the FileReader        var reader = new FileReader();         // Read the local file as a DataURL        reader.readAsDataURL(files[0]);         // When loaded, set image data as background of div        reader.onloadend = function(){         $("#uploadPreview").css("background-image", "url("+this.result+")");                }     } });

 

转载地址:http://ajjrl.baihongyu.com/

你可能感兴趣的文章
关于“淘宝爆款”的数据抓取与数据分析
查看>>
推断Windows版本号新方法
查看>>
Android NDK开发----- JNI多线程
查看>>
Angular 2的12个经典面试问题汇总(文末附带Angular測试)
查看>>
JWT(JSON Web Token) 多网站的单点登录,放弃session
查看>>
oc37--类工厂方法
查看>>
【JSP】EL表达式语言
查看>>
安装Centos6.9分区指南
查看>>
将完整的Maven远程存储库下载到本地存储库(别试了,不太可取)
查看>>
背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox
查看>>
Ubuntu 16.04利用SecureCRT上传/下载文件(sz/rz命令)
查看>>
大数据开发 | MapReduce介绍
查看>>
软件测试之缺陷报告的组成
查看>>
Arduino基本数据类型
查看>>
nginx作为web服务以及nginx.conf详解
查看>>
P3388 【模板】割点(割顶)
查看>>
[cpu]cpu unused pin应该怎样从硬件和软件上处理
查看>>
phpt5支付宝登陆支付接口解析
查看>>
js中表单数据序列化方式
查看>>
Gradle与Makefile构建工具的对比
查看>>