您的位置:首页 > Web前端 > JQuery

jquery异步上传图片

2016-09-23 14:47 239 查看
使用到的插件:

jquery、jquery-form

html代码:
<div class="img-add">点击上传图片</div>
<!-- 图片隐藏域 -->
<div id="img-add-list" style="display:none;">
<div>
<form id="img-add-form" data-curl="/">
<div>
<input type="hidden"  class="" value="1" name="image_file"/>
<input type="file"  id="img-add-form-file" class="pointer" name="image" />
<input type="hidden" name="image" />
</div>
</form>
<div class="img-add-bg"></div>
</div>
<div class="clear"></div>
</div>
Js代码:
var obj ;
$('.img-add').click(function (){
obj=$(this);
$("#img-add-form-file").click();
})
$("#img-add-form-file").change(function (){
if(pre_submit_file($(this)[0])){

$("#img-add-form").ajaxSubmit({
type: 'post',
url: '',
data:{},
success: function(data){
var data = eval('('+data+')')
$("#img-add-form-file").val('');
//todo
}
});
}else{
$(this).val('');
}
});
function pre_submit_file(objfile){
var file = objfile.files[0];
if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)){
alert("上传图片",['这里只能上传图片哦']);
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
if(file.size>4*1024*1024){
alert("上传图片",['这里只允许上传4M及以下的图片哦']);
return false;
}
return true;
}


View Code
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: