javascript实现图片预览和上传（兼容IE）代码分享

这篇文章主要为大家详细介绍了javascript图片预览和上传的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

输出图片的类型 */ 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('请输入内容'); } } };

相关文章：

用HTML5轻松实现图片预览

详解html5图片上传支持图片预览压缩及进度显示兼容IE6及标准浏览器

JavaScript进阶(八)JS实现图片预览并导入服务器功能

以上就是javascript实现图片预览和上传（兼容IE）代码分享的详细内容，更多请关注Gxl网其它相关文章！