jquery异步上传图片

使用到的插件:

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

 

posted @ 2016-09-23 14:47  loweringye  阅读(83)  评论(0编辑  收藏  举报