图片预览JS

最新推荐文章于 2024-12-19 18:02:11 发布

原创最新推荐文章于 2024-12-19 18:02:11 发布 · 472 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #图片 #图片预览

js 同时被 2 个专栏收录

28 篇文章

订阅专栏

html

17 篇文章

订阅专栏

   
工作中，因为遇到图片上传的功能，H5来实现很简单，但要兼容，所以在别人的基础上作修改，本人测试兼容IE6-9。
还有遇到CHANGE事件上传成功后，不能再触发的BUG，因为原来  用<pre name="code" class="html">$(".js-file").on("change",function(){});这样上传成功后，点又上传，CHANGE会无法触发。。后来改为

$(document).on("change",".js-file", function() {}) OK

<!DOCTYPE html> <meta charset="utf-8"> <title>js读取本地图片</title> <script type="text/javascript"> function loadLocalImage(file,id) { var ie6=(!!window.ActiveXObject&&!window.XMLHttpRequest)?true:false; var div=document.getElementById(id); var wh='width:100%;height:100%;display:block;vertical-align:top;'; if (file.files && file.files[0]) { var reader = new FileReader(); reader.readAsDataURL(file.files[0]); reader.onload = function(evt) { div.innerHTML='<img src="'+reader.result+'" style="'+wh+'">'; } } else { if(ie6) { div.innerHTML = '<img src="'+file.value+'" style="'+wh+'"/>'; } else { file.select(); var src = document.selection.createRange().text; var sFilter='progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'+src+')'; div.style.filter = sFilter; } } } </script> <div id="div1" style="width:200px;height:200px;border:4px solid #1391E3;position:relative;"></div> <input type="file" name="" id="" onchange="loadLocalImage(this,'div1')" /> <div id="div2" style="width:200px;height:200px;border:4px solid #CB2A16;position:relative;"></div> <input type="file" name="" id="" onchange="loadLocalImage(this,'div2')" />另附加一个图片上传的插件 <script src="js/ajaxfileupload.js"></script>用法，其中，回调DATA是取不到返回信息的。。。$.ajaxFileUpload({ url: app.url[3], secureuri: false, fileElementId: 'uploadFile' + i, data: { 'imgCode': app[expando], //流水号 'actId': actId, 'code': code }, dataType: 'json', success: function(data) { self.num++; //两张图完成上传 if (self.checkCompleted()) { setTimeout(function() { self.uploadData(username, yynum, telnum); }, 500); } } });