javascript圖片預(yù)覽和上傳(兼容IE)
更新時間:2017年03月15日 14:30:52 作者:Fayin
這篇文章主要為大家詳細(xì)介紹了javascript圖片預(yù)覽和上傳的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(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瀏覽器暫時無法顯示
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('出錯:' +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-11
Ajax高級筆記 JavaScript高級程序設(shè)計筆記
這篇文章主要介紹了Ajax高級筆記 JavaScript高級程序設(shè)計筆記,需要的朋友可以參考下2017-06-06
bootstrap timepicker在angular中取值并轉(zhuǎn)化為時間戳
這篇文章主要介紹了bootstrap timepicker在angular中取值并轉(zhuǎn)化為時間戳的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
微信小程序?qū)崿F(xiàn)圖片上傳放大預(yù)覽刪除代碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片上傳放大預(yù)覽刪除代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-07-07

