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

Web开发 2015-04-03

网络上搜索到的结果大多是使用隐藏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格式的结果,通知前端即可。


本文由 surenkid 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论