jQuery无刷新上传图片简单实现

网络上搜索到的结果大多是使用隐藏iframe方式，而这里要说的是直接ajax post提交上传的方式。ajax post提交需要用到非常牛的一个jQuery插件jQuery Form。

首先在页面中引入jQuery及jQuery Form插件，

<script type="text/javascript" src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.useso.com/js/jquery.form/3.50/jquery.form.min.js"></script>

在页面上放置一个file上传控件

<form id="myForm" action="upload.php" method="post">
    <input id="fileupload" type="file" name="mypic">
</form>

然后写入js脚本，监视上传按钮，有变化时，调用jQuery Form的ajaxSumit方法上传，并且取得json的返回结果。

$("#fileupload").change(function(){
    $("#myupload").ajaxSubmit({
        dataType:  'json',
        beforeSend: function() {
            //上传前的动作
        },
        uploadProgress: function(event, position, total, percentComplete) {
            //返回进度，percentComplete为当前的进度值
        },
        success: function(data) {
            //上传成功后执行的动作
            alert(data.myfilename+'上传成功');
        },
        error:function(xhr){
            //上传失败时执行的动作
        }
    });
});

后端处理代码就很简单了，如同处理普通的input file上传一样，获取上传的临时文件地址，并进行处理后，返回json格式的结果，通知前端即可。