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

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

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浏览器设置img的src为本地路径可以直接显示图片
     if (isie6) {
      pic.src = reallocalpath;
     }else {
      // 非ie6版本的ie由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
      pic.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(sizingmethod='image',src=\"" + reallocalpath + "\")";
      // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
      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) {

          // 拼接显示预览图片的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);
          // 将转化后的图片地址放在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  图片压缩的质量[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,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('请输入内容');
    }

   }

  };

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