//引入js文件 可去https://github.com/think2011/localResizeIMG下载
<script src="../localResizeIMG-master/dist/lrz.bundle.js" charset="utf-8" type="text/javascript"></script>
<input type="file" id="pic1" />
//js操作
document.querySelector('#pic1').addEventListener('change', function () {
// this.files[0] 是用户选择的文件
lrz(this.files[0], {width: 500})//图片的宽
.then(function (rst) {
// 把处理的好的图片给用户看看呗
var img = new Image();
img.src = rst.base64;
img.onload = function () {
document.body.appendChild(img);//显示图片 img为标签直接用就行
};
return rst;
})
.then(function (rst) {
// 这里该上传给后端啦
/* ==================================================== */
// 其他框架,例如jQuery处理formData略有不同,请自行google,baidu。
$.ajax({
url: '{G_WEB_PATH}/?/mobile/home/singleinsert_upload/', // 这个地址做了跨域处理,可以用于实际调试
data: rst.formData,//$_FILES php页面直接处理就行
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
var hehe=eval("("+data+")");
$("#shaitu1").val(hehe['msg']);
}
});
})
.catch(function (err) {
// 万一出错了,这里可以捕捉到错误信息
// 而且以上的then都不会执行
alert(err);
})
.always(function () {
// 不管是成功失败,这里都会执行
});
});
手机端上传图片 先压缩再上传 兼容性高
猜你喜欢
转载自blog.csdn.net/yao978318542/article/details/53099253
今日推荐
周排行