使用到的插件:
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; }