如果用ajax直接传图片后台不好接受,所以最终还是要通过ajax来实现,原理很简单,触发form的submit()就可以了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function() { $('#fileUp').change(function() { $('#uploadLog').html('开始上传中....'); $('#formFile').submit(); }); }) function uploadSuccess(msg) { if (msg.split('|').length > 1) { $('#imgShow').attr('src', msg.split('|')[1]); $('#uploadLog').html(msg.split('|')[0]); } else { $('#uploadLog').html(msg); } } </script> </head> <body> <!-- 大家注意到这个form的target的了么?这个target属性的值frameFile,是form之后的iframe的name值, 这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理, 并且不会产生当前页面跳转! --> <form id='formFile' name='formFile' method="post" action="IbeaconHandler.ashx" target='frameFile' enctype="multipart/form-data"> <input type='file' id='fileUp' name='fileUp' /> <div id='uploadLog'> </div> <br /> <img width='200' src='' height='200' id='imgShow' alt='缩略图' /> </form> <!-- 这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面, 但是这已不重要了,因为当前的iframe已经被我display:none隐藏了!所以这样给用户看起来像是无刷新的 页面文件上传,其实只是做一个一个小小的技巧! --> <iframe id='frameFile' name='frameFile' style='display: none;'></iframe> </body> </html>
借鉴自http://www.cnblogs.com/zcttxs/archive/2013/07/09/3180509.html