javascript圖片預(yù)覽和上傳(兼容IE)
更新時(shí)間:2017年03月15日 14:30:52 作者:Fayin
這篇文章主要為大家詳細(xì)介紹了javascript圖片預(yù)覽和上傳的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js圖片預(yù)覽和上傳的具體代碼,供大家參考,具體內(nèi)容如下
var dailiApply = { change: function (evt) { evt.preventDefault(); var pic = document.getElementById("preview"), file = document.getElementById("f"); var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase(); // gif在IE瀏覽器暫時(shí)無法顯示 if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){ alert("圖片的格式必須為png或者jpg或者jpeg格式!"); return; } var isIE = navigator.userAgent.match(/MSIE/)!= null, isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null; if(isIE) { file.select(); var reallocalpath = document.selection.createRange().text; // IE6瀏覽器設(shè)置img的src為本地路徑可以直接顯示圖片 if (isIE6) { pic.src = reallocalpath; }else { // 非IE6版本的IE由于安全問題直接設(shè)置img的src無法顯示本地圖片,但是可以通過濾鏡來實(shí)現(xiàn) pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")"; // 設(shè)置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認(rèn)圖片 pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; } }else { var file_arr = file.files; var ul = $(".weui_uploader_files"); if(file_arr.length < 7) { for(var key in file_arr) { if(file_arr.hasOwnProperty(key)) { var f = file_arr[key]; var url = URL.createObjectURL(f); var reader = new FileReader(); console.log(f); reader.readAsDataURL(f); n +=1; if(n < 7) { reader._onload = function(e) { // 拼接顯示預(yù)覽圖片的html var list = $("<li class='weui_uploader_file' style='position: relative'>" + "<img id='preview" + n + "' class=preview_li' style='width: 100%;height: 100%'>" + "<span id='delImg" + n+ "' style='position: absolute; top: 0; right: 4px; color: #e4007f'>X</span></li>"); ul.append(list); // 將轉(zhuǎn)化后的圖片地址放在img中 var pic = document.getElementById('preview' + n); //pic.src = this.result; pic.src=url; dailiApply.compress(f, .7,undefined); //images.push(f); document.getElementById('delImg' + n).addEventListener("click", function () { $(this).parent().remove(); --n; }); }; reader._onload(); }else { $.alert("最多上傳6張圖片"); n = 6; } } } }else { $.alert("最多上傳6張圖片"); } } return false; }, /** * @param {Object} f input選擇的圖片 必填 * @param {String} quality 圖片壓縮的質(zhì)量[0, 1] * @param {String} output_img_type 輸出圖片的類型 */ compress: function (f, quality, output_img_type) { var mime_type = "image/jpeg"; if(output_img_type!=undefined && output_img_type=="image/png"){ mime_type = "image/png"; } createImageBitmap(f).then(function(imageBitmap) { var max = 1000; // 設(shè)置最大分辨率 var c_w = ''; var c_h = ''; var width = imageBitmap.width; var height = imageBitmap.height; // 等比例縮放 if (width > max || height > max) { if (width > height) { c_w = max; c_h = max * height / width; } else { c_h = max; c_w = max * width / height; } }else { // 不縮放 c_w = width; c_h = height; } var canvas = document.createElement('canvas'); canvas.width = c_w; canvas.height = c_h; var ctx = canvas.getContext('2d'); ctx.drawImage(imageBitmap,0,0, width, height, 0, 0, c_w, c_h); canvas.toBlob(function(blob){ images.push(blob); },mime_type, quality); }); }, submit: function () { var content = $(".weui_textarea").val().trim(); var xhr = new XMLHttpRequest(); var fd = new FormData(document.getElementById('uploadForm')); $.each(images,function(i,e){ fd.append("images", e); }); fd.append("remark", content); fd.append("substationproxyId", 8); console.log(images); console.log(fd); if(content) { $.ajax({ url: CONFIG.API.addSubProxyRecruit, type: "POST", data: fd, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType beforeSend: function (xhr) { $.showLoading(); $(this).prop("disabled", true) }, success: function (json) { console.log(json); $.hideLoading(); $(this).prop("disabled", false); if(json.errorCode == 0) { $.alert("保存成功", function () { location.reload(); }) }else if(json.errorCode == "-101") { $.alert('出錯(cuò):' +json.message, function () { location.href = CONFIG.HTML.login; }); }else { $.alert(json.message, function () { }) } } }); }else { $.alert('請輸入內(nèi)容'); } } };
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS使用H5實(shí)現(xiàn)圖片預(yù)覽功能
- 簡單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能
- angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽
- JS HTML5拖拽上傳圖片預(yù)覽
- js實(shí)現(xiàn)純前端的圖片預(yù)覽
- 輕松實(shí)現(xiàn)js圖片預(yù)覽功能
- javascript實(shí)現(xiàn)input file上傳圖片預(yù)覽效果
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- viewer.js實(shí)現(xiàn)圖片預(yù)覽功能
相關(guān)文章
跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ES6
跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ECMAScript 6,ES6(ECMAScript 6)是即將到來的新版本JavaScript語言的標(biāo)準(zhǔn),代號harmony,感興趣的小伙伴們可以參考一下2015-11-11Ajax高級筆記 JavaScript高級程序設(shè)計(jì)筆記
這篇文章主要介紹了Ajax高級筆記 JavaScript高級程序設(shè)計(jì)筆記,需要的朋友可以參考下2017-06-06bootstrap timepicker在angular中取值并轉(zhuǎn)化為時(shí)間戳
這篇文章主要介紹了bootstrap timepicker在angular中取值并轉(zhuǎn)化為時(shí)間戳的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06微信小程序?qū)崿F(xiàn)圖片上傳放大預(yù)覽刪除代碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片上傳放大預(yù)覽刪除代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07