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

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