社区团购微信小程序_jquery完成上传图片功用

jquery实现上传图片功能       这篇文章主要为大家详细介绍了jquery实现上传图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery实现上传图片功能的具体代码,供大家参考,具体内容如下

代码:

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title 点击头像上传图片 /title 
 style 
 margin:0;
 padding: 0;
div,#avarimgs,#xdaTanFileImg{
 width: 100px;
 height: 100px;
 margin:50px auto;
 position: relative;
#xdaTanFileImg{
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 /style 
 /head 
 body 
 div 
 input type="file" name="pclogo" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*" 
 img src="/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u= fm=26 gp=0.jpg" id="avarimgs" 
 /div 
 /body 
 script src="jquery-2.1.1.min.js" /script 
 script type="text/javascript" 
if (typeof FileReader == 'undefined') {
 document.getElementById("xmTanDiv").InnerHTML = " h1 当前浏览器不支持FileReader接口 /h1 
 document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
//选择图片,马上预览
 function xmTanUploadImg(obj) {
 console.log(obj)
 var file = obj.files[0]; 
 console.log(obj);console.log(file);
 console.log("file.size = " + file.size);
 var reader = new FileReader();
 reader.onloadstart = function (e) {
 console.log("开始读取....");
 reader.onprogress = function (e) {
 console.log("正在读取中....");
 reader.onabort = function (e) {
 console.log("中断读取....");
 reader.onerror = function (e) {
 console.log("读取异常....");
 reader.onload = function (e) {
 console.log("成功读取....");
 var img = document.getElementById("avarimgs");
 img.src = e.target.result;
 //或者 img.src = this.result; //e.target == this
 reader.readAsDataURL(file)
 /script 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信