javascript图片预览和上传（兼容IE）

本文实例为大家分享了js图片预览和上传的具体代码，供大家参考，具体内容如下

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浏览器暂时无法<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>
if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
 alert("<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的格式必须为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浏览器设置img的src为本地路径可以直接<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>
 if (isIE6) {
  pic.src = reallocalpath;
 }else {
  // 非IE6版本的IE由于安全问题直接设置img的src无法<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>本地<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>，但是可以通过滤镜来实现
  pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
  // 设置img的src为base64编码的透明<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a> 取消<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>浏览器默认<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>
  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) {

      // 拼接<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>预览<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的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);
      // 将转化后的<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>地址放在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("最多<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>6张<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>");
     n = 6;
    }
   }
  }
 }else {
  $.alert("最多<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>6张<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>");
 }
}
return false;

},/**

@param {Object} f input选择的图片必填
@param {String} quality 图片压缩的质量[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; // 设置最大分辨率
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,width,height,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('请输入<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>');
}

}

};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/40684.html

javascript图片预览和上传（兼容IE）

猜你在找的JavaScript相关文章