html5 ajax文件上传

最新推荐文章于 2024-04-11 01:59:47 发布

剑神一笑

最新推荐文章于 2024-04-11 01:59:47 发布

阅读量2.3k

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/cbxjj/article/details/50730308

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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');
//    瓦片canvas
var 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" οnsubmit="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"
οnclick="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>

剑神一笑

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 ajax文件上传

投诉content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />type="text/css" />src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">
复制链接

扫一扫