html5 ajax文件上传

来源：互联网发布：怎么做淘宝网页编辑：程序博客网时间：2024/06/07 02:52
<!DOCTYPE html><html><head><title>投诉</title><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /><script src="jquery-weui/dist/lib/jquery-2.1.4.js"></script><script src="jquery-weui/dist/js/jquery-weui.js"></script><link rel="stylesheet" href="jquery-weui/dist/lib/weui.min.css"><link rel="stylesheet" href="jquery-weui/dist/css/jquery-weui.css"><link href="../js/bootstrap/css/bootstrap.css" rel="stylesheet"type="text/css" /><script language="javascript" src="../js/bootstrap/js/bootstrap.min.js"></script><script type="text/javascript"src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script type="text/javascript">var isImageUploadComplete = true;var maxsize = 1024 * 1024;var canvas = document.createElement("canvas");var ctx = canvas.getContext('2d');//    瓦片canvasvar tCanvas = document.createElement("canvas");var tctx = tCanvas.getContext("2d");var imgData;var imgType;function ajaxFileUpload() {/* $.ajaxFileUpload({url : "http://"+window.location.host+"/ShianyunServer/userFeedback.htm",secureuri : false,fileElementId : 'feedbackImg',dataType : 'json',data : {"token" :'83B0D869228864C533F77FC75549116396C73A6335D46AB09B7932F8A8D3781B5D401F782EE444CC',"content" : $("#content").val()},success : function(data, status) {$.hideLoading();if(data.statusCode == "0"){window.location.href="Return.html?result=success";}else{window.location.href="Return.html?result=failure&errorMsg="+data.errorMsg;}},error : function(data, status, e) {$.hideLoading();}}) */var formData = new FormData();if (isImageUploadComplete) {$.showLoading("数据加载中...");//开启进度条if (imgData) {var text = window.atob(imgData.split(",")[1]);var buffer = new Uint8Array(text.length);var pecent = 0, loop = null;for (var i = 0; i < text.length; i++) {buffer[i] = text.charCodeAt(i);}var blob = getBlob(buffer, imgType);formData.append('feedbackImg', blob);}formData.append('content', $("#content").val());formData.append('token','83B0D869228864C533F77FC75549116396C73A6335D46AB09B7932F8A8D3781B5D401F782EE444CC');$.ajax({url : "http://" + window.location.host+ "/ShianyunServer/userFeedback.htm",type : 'POST',data : formData,processData : false,contentType : false,dataType : 'json',success : function(data) {$.hideLoading();if (data.statusCode == "0") {window.location.href = "Return.html?result=success";} else {window.location.href = "Return.html?result=failure&errorMsg="+ data.errorMsg;}},error : function(responseStr) {}});} else {var $dialog = $('#dialog2');$dialog.show();$dialog.find('.weui_btn_dialog').one('click', function() {$dialog.hide();});}return false;}//  使用canvas对大图片进行压缩function compress(img) {var initSize = img.src.length;var width = img.width;var height = img.height;//如果图片大于四百万像素，计算压缩比并将大小压至400万以下var ratio;if ((ratio = width * height / 4000000) > 1) {ratio = Math.sqrt(ratio);width /= ratio;height /= ratio;} else {ratio = 1;}canvas.width = width;canvas.height = height;//        铺底色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, canvas.width, canvas.height);//如果图片像素大于100万则使用瓦片绘制var count;if ((count = width * height / 1000000) > 1) {count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片//            计算每块瓦片的宽和高var nw = ~~(width / count);var nh = ~~(height / count);tCanvas.width = nw;tCanvas.height = nh;for (var i = 0; i < count; i++) {for (var j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw* ratio, nh * ratio, 0, 0, nw, nh);ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);}}} else {ctx.drawImage(img, 0, 0, width, height);}//进行最小压缩var ndata = canvas.toDataURL('image/jpeg', 0.1);console.log('压缩前：' + initSize);console.log('压缩后：' + ndata.length);console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize)+ "%");tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;return ndata;}// 获取blob对象的兼容性写法function getBlob(buffer, format) {var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;if (Builder) {var builder = new Builder;builder.append(buffer);return builder.getBlob(format);} else {return new window.Blob([ buffer ], {type : format});}}$(function() {$('#feedbackImg').change(function() {isImageUploadComplete = false;var reader = new FileReader();var files = Array.prototype.slice.call(this.files);file = files[0];//获取图片大小var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024))/ 10 + "MB": ~~(file.size / 1024) + "KB";reader.onload = function() {var result = this.result;var img = new Image();img.src = result;//如果图片大小小于100kb，则直接上传if (result.length <= maxsize) {img = null;imgData = result;imgType = file.type;isImageUploadComplete = true;$('#localImag').attr("style",'background-image:url('+ imgData + ')');return;}//图片加载完毕之后进行压缩，然后上传if (img.complete) {callback();} else {img.onload = callback;}function callback() {imgData = compress(img);imgType = file.type;isImageUploadComplete = true;$('#localImag').attr("style",'background-image:url('+ imgData + ')');img = null;}};reader.readAsDataURL(file);})})</script><style type="text/css">.box {margin: 15px 0 0;padding: 0px 15px;background: rgb(255, 255, 255);}</style></head><body><div class="box"><form id="authorization-register" method="post"action="http://www.shianyuntu.com:8080/ShianyunServer/userFeedback.htm"name="register" role="form" style="color: rgb(117, 117, 117);"enctype="multipart/form-data" onsubmit="return mySubmit(this);"><div class="form-group"><label for="content">投诉内容</label>:<textarea rows="5" class="form-control" maxlength="400"name="content" id="content"></textarea></div><div class="form-group"><ul class="weui_uploader_files" id=""><li class="weui_uploader_file weui_uploader_status" id="localImag"><div class="weui_uploader_status_content"></div></li></ul><div class="weui_uploader_input_wrp"><input class="weui_uploader_input" type="file"accept="image/jpg,image/jpeg,image/png,image/gif"name="feedbackImg" id="feedbackImg" /></div></div><div class="form-group"><button type="button" class="btn btn-primary btn-block"onclick="ajaxFileUpload();">提交</button></div></form></div><div class="weui_dialog_alert" id="dialog2" style="display: none;"><div class="weui_mask"></div><div class="weui_dialog"><div class="weui_dialog_hd"><strong class="weui_dialog_title">提示</strong></div><div class="weui_dialog_bd">图片压缩中,请稍候!</div><div class="weui_dialog_ft"><a href="javascript:;" class="weui_btn_dialog primary">确定</a></div></div></div></body></html>
0 0