ajax-upload-image.mobile
简介
进行移动web开发时,图片上传功能基本都会使用到。实现虽然说难度不大,但自己还是会遇到很多小坑。写了一个demo(可正常使用,demo只有前端代码)来给大家提供一种思路。
demo预览
如何使用?
- demo/index.html中样例所示,引入如下js
<script type="text/javascript" src="../lib/exif.js"></script>
<script type="text/javascript" src="../js/wrapper.js"></script>
<script type="text/javascript" src="../js/upload_image.js"></script>
exif.js是一个开源的读取图像的原始数据的功能扩展js,用于处理ios设备拍照上传存在的图片旋转问题
wrapper.js创建遮罩层简单js
upload_image.js图片展示操作依赖wrapper.js
- 创建imageUpload
//当前已上传图片张数
var i = function(){
return $("img.preview").length;
}
new ImageUploader($(".upload-area"),{
uploaderUrl:uploaderUrl,
inputName:"imgs",
beforeComplete:function(){
$('#submitBtn').attr('disabled',true);
},
afterComplete: function() {
$('#submitBtn').attr('disabled',false);
if(i() > 0){
$(".J_Showmeonfileuploaded").hide()
}
if(5 === i()){
$(".upload-btn").hide();
}
}
});
- 配置参数
{
inputName: "img",//input名,用于构造表单提交数据
onlyShow: !1, //是否只查看
uploadBtn: ".J_UploadBtn",//图片上传按钮
fileInput: ".J_FileInput",//图片inputfile
prevClass: "preview",//所有上传成功并显示的图片都会添加此类(可统计当前已上传图片张数)
uploaderUrl: "",//图片上传url地址
deleteUrl: "",//删除图片url地址
limitSize: 5, //图片大小限制 5M
limitNum: 5, //图片数量限制
beforeComplete: function() {},//图片上传前回调函数
afterComplete: function() {}//图片上传完成回调函数
}