工作中，因爲遇到圖片上傳的功能，H5來實現很簡單，但要兼容，所以在別人的基礎上作修改，本人測試兼容IE6-9。
還有遇到CHANGE事件上傳成功後，不能再觸發的BUG，因爲原來 用<pre name="code" class="html">$(".js-file").on("change",function(){});這樣上傳成功後，點又上傳，CHANGE會無法觸發。。後來改爲<!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="" οnchange="loadLocalImage(this,'div1')" /> <div id="div2" style="width:200px;height:200px;border:4px solid #CB2A16;position:relative;"></div> <input type="file" name="" id="" οnchange="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); } } });
