DDR爱好者之家 Design By 杰米
本文实例为大家分享了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('请输入内容'); } } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]