jQuery上传图片并预览

Html

Css

//建立一可存取到file的url
 function getObjectURL(file) {
     var url = null;
     if (window.createObjectURL != undefined) { // basic
         url = window.createObjectURL(file);
     } else if (window.URL != undefined) { // mozilla(firefox)
         url = window.URL.createObjectURL(file);
     } else if (window.webkitURL != undefined) { // webkit or chrome
         url = window.webkitURL.createObjectURL(file);
     }
     return url;
 }

function gome(obj) {
     var objUrl = getObjectURL(obj.files[0]); //获取图片的路径，该路径不是图片在本地的路径
     if (objUrl) {
         $(obj).parent().find('span').html("<img src='" + objUrl + "' width='100%'>"); //将图片路径存入src中，显示出图片
     }
 }

// 上传图片 获取图片的宽高 文件大小
 var _URL = window.URL || window.webkitURL;
 $("#front").change(function(e) {
     var file, img;
     if ((file = this.files[0])) {
         img = new Image();
         img.onload = function() {
             alert('图片宽：' + this.width + " 图片高：" + this.height + " 图片大小：" + file.size);
         };
         img.src = _URL.createObjectURL(file);
     }
 });

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.1

立即下载

jQuery上传图片并预览



代码描述：上传图片时可以预览图片内容

.fileinput-button 是input：file 样试
gome() 方法是获取图片对象
getobjecturl(file) 建立一可存取到file的url
还可以获取图片的宽、高、大小用作判断限制条件

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

LLH

相关代码

jQuery上传图片并预览

最新