无刷新上传图片的几种方式

背景知识：

1. 无刷新上传图片主要还是为了在提交表单之前进行图片的预览。用户体验相对于提交表单跳转显示图片的方式总还是要好一些的。
2. 本文主要介绍三种无刷新上传图片的方式

 

1.使用iframe子页面的形式达到无刷新上传图片的功能。首先设置一个隐藏的iframe元素并设置其name属性为upload，接着在form表单上设置一个target属性，值为upload，需要和iframe的name属性的值保持一致，代码示例如下：

#注意设置enctype的值为multipart/form-data

<form action="index.php" target="upload" enctype="multipart/form-data" method="post">
    <input name="upload" type="file">
    <input type="submit"/>
</form>
<iframe name="upload" style="display:none;"></iframe>
<script>
    var upload={
        show:function($filename) {
            //逻辑处理
        }
    }
</script>

接着编写index.php中图片处理的代码，与我们平常使用表单提交上传处理的逻辑一样，简单的代码示例：

<?php

$file=$_FILES['upload']

//做一些上传处理...假设$path是最后需要返回的图片路径

//注意返回的内容，我们在提交页面的底部定义了一个upload对象
//当我们处理完逻辑之后返回以下js代码将调用upload对象的show方法并将$path传入
$str="<script>window.parent.upload.show('{$name}')</script>";
echo $str;exit;

我们可以在show方法中将接受到的图片路径赋值给img元素的src，这样就能预览图片了，当然你也可以做一些自定义的处理。使用iframe有一点不好就是：当我们其他的表单元素也需要通过form提交时，这时候就会出现form的嵌套，而html中form的嵌套是不允许的。

 

2.使用FormData对象，FormData可以简单理解为就是一个表单对象，你可以通过append方法向FormData的实例中追加键值。下面介绍一下使用FormData对象来实现无刷新上传图片：

<input type="file" name="pic"  id="logo">

<script>
$('input[name=pic]').change(function(){
    that = $(this)
    var form=new FormData();
    $file = document.getElementById('logo')
    form.append('file',$file.files[0])
    $.ajax({
        type:'POST',
        url:'上传地址',
        data:form,
        contentType : false, //需要设置为false，默认会加上正确的content-type
        processData : false, //需要设置为false，避免jquery对formdata对象的默认处理
        mimeType:"multipart/form-data",
        dataType:'json',
        success:function(data){
            //自己的逻辑处理
        }
    });

});
</script>
                                

使用FormData对象的好处就是不像iframe那样需要依赖form表单元素，它不要input元素被form表单元素给包裹。

 

3.使用第三方插件，本文主要介绍uploadify的使用，官网地址。这个插件有两个版本的，一个是基于flash（免费）的，一个是基于html（收费）的。这里主要讲述免费版本falsh的使用。

<link href="uploadify/uploadify.css"/>
<script src="js/jquery.js"></script>
<script src="uploadify/jquery.uploadify.min.js"></script>

<input type='file' name='logo' id='img'/>
<div id="queue"></div>


<script>

$('#img').uploadify({
        'buttonClass' : 'btn btn-blue',
        'queueID'  : 'queue', //设置进度条的展示位置
        'buttonText': '图片上传',   //用来定义按钮的文字
        'swf': '/plugins/uploadify/uploadify.swf',
        'method':'Post',
        'uploader' : 'url地址',  //上传文件的路径
        'fileObjName':'img',  //定义$_FILES的键，例如我这边定义为img，那么后端通过$_FILES['img']获取上传的文件
        
        //上传成功的回调
        'onUploadSuccess' : function(file, data, response) {
            //如果后端返回json字符串，需要通过如下语句转成json对象
            var obj = eval('(' + data + ')');
            //逻辑处理
        },
        
        //上传错误的回调
        'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            //逻辑处理
        },

    });

</script>

注意在使用flash版本的uploadify时需要设置当前页面浏览器的flash可用，否则会没有效果！

具体如何设置（这里以谷歌浏览器为例）：

以上就是三种无刷新上传图片的方式。