AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

javascript图片预览和上传(兼容IE)

51自学网 http://www.wanshiok.com
js图片预览,js图片上传,js图片预览和上传

本文实例为大家分享了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('请输入内容');    }   }  };

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


js图片预览,js图片上传,js图片预览和上传  
上一篇:Vuex模块化实现待办事项的状态管理  下一篇:轻松理解JavaScript之AJAX