JavaScript implementiert die Codefreigabe für Bildvorschau und Upload (kompatibel mit IE).

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Javascript-Bildvorschau und zum Hochladen vor. Interessierte Freunde können sich auf die Beispiele von

diesem Artikel beziehen Teilen Sie den spezifischen Code für die js-Bildvorschau und laden Sie ihn als Referenz hoch. Der spezifische Inhalt lautet wie folgt:

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=&#39;weui_uploader_file&#39; style=&#39;position: relative&#39;>" +
           "<img id=&#39;preview" + n + "&#39; class=preview_li&#39; style=&#39;width: 100%;height: 100%&#39;>" +
           "<span id=&#39;delImg" + n+ "&#39; style=&#39;position: absolute; top: 0; right: 4px; color: #e4007f&#39;>X</span></li>");
          ul.append(list);
          // 将转化后的图片地址放在img中
          var pic = document.getElementById(&#39;preview&#39; + n);
          //pic.src = this.result;
          pic.src=url;
          dailiApply.compress(f, .7,undefined);
          //images.push(f);
          document.getElementById(&#39;delImg&#39; + 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 = &#39;&#39;;
     var c_h = &#39;&#39;;
     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(&#39;canvas&#39;);
     canvas.width = c_w;
     canvas.height = c_h;
     var ctx = canvas.getContext(&#39;2d&#39;);
     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(&#39;uploadForm&#39;));
    $.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(&#39;出错：&#39; +json.message, function () {
         location.href = CONFIG.HTML.login;
        });
       }else {
        $.alert(json.message, function () {

        })
       }
      }
     });
    }else {
     $.alert(&#39;请输入内容&#39;);
    }

   }

  };

Verwandte Artikel:

Verwenden Sie HTML5, um die Bildvorschau einfach zu implementieren

Detaillierte Erläuterung des HTML5-Bild-Uploads unterstützt die Bildvorschau-Komprimierung und Fortschrittsanzeige. Kompatibel mit IE6 und Standardbrowsern

JavaScript Advanced (8) JS implementiert Bilder Vorschau und Import von Serverfunktionen

Das obige ist der detaillierte Inhalt vonJavaScript implementiert die Codefreigabe für Bildvorschau und Upload (kompatibel mit IE).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!