背景知識：

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可用，否則會沒有效果！

具體如何設定（這裡以谷歌瀏覽器為例）：

以上就是三種無重新整理上傳圖片的方式。