程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 使用Ajax異步上傳圖片的方法(html,javascript,php)

使用Ajax異步上傳圖片的方法(html,javascript,php)

編輯:關於PHP編程

使用Ajax異步上傳圖片的方法(html,javascript,php)


前兩天項目中需要用到異步上傳圖片和顯示上傳進度的功能,於是找了很多外國的文章,翻山越嶺地去遇上各種坑,這裡寫篇文章記錄一下。

HTML



HTML代碼沒什麼好說,一個form表單,還有文件類型的input。我們來看js部分。

javascript

    //綁定了`submit`事件。    
    $('#fileupload-form').on('submit',(function(e) {
        e.preventDefault();
        //序列化表單   
       var serializeData = $(this).serialize();

       // var formData = new FormData(this);
       $(this).ajaxSubmit({
            type:'POST',
            url: *yoururl*,
            dataType: 'json', 
            data: serializeData,            
            // data: formData,

            //attention!!!   
            contentType: false,      
            cache: false,             
            processData:false,      

            beforeSubmit: function() {
                    //上傳圖片之前的處理   
            },
            uploadProgress: function (event, position, total, percentComplete){ 
                //在這裡控制進度條   
            },
            success:function(){

            },
            error:function(data){
                alert('上傳圖片出錯');
            }
        });
    }));

    //綁定文件選擇事件,一選擇了圖片,就讓`form`提交。   

    $(#fileupload).on(change, function() {
        $(this).parent().submit();
    });

PHP

遇到的坑:

序列化表單,因為是文件,不能通過val()text()等方法獲取到它的值,只能通過序列化表單提交。代碼裡面使用.serialize(),有另外一種做法是使用.FormData()來提交,但是實驗過程中,一開始正常,後來報錯了。在stackoverflow.com上有人看到有人遇到同樣地問題,沒有解決,於是就放棄了。 普通的ajax是沒辦法或者說很難拿到上傳進度的。這裡使用了一個插件jQuery Form Plugin,使用方法很簡單,原本ajax的配置都能用,而且有很多實用功能和詳盡的使用文檔。推薦~ ajax上傳圖片這三個參數必須配置contentType: false, cache: false, processData:false,。 獲取本地預覽圖,這種方法可能會有浏覽器兼容性問題。
$(#fileupload).change(function(){
    if (this.files && this.files[0]) {
       var reader = new FileReader();            
       reader.onload = function (e) {
            $('#theImg').attr('src', e.target.result);
        }
       reader.readAsDataURL(this.files[0]);
   }
}
php部分注意雖然Ajax那裡使用的是POST方法,但是後台接受的時候只要是文件都是用$_FILES。你可以通過$_FILES['file']['type']去判斷文件格式來做安全處理,我們這裡只是演示。還有其他參數,比如tmp_name是文件路徑,name是文件名。後台接收以後,你可以使用move_uploaded_file()來將文件保存到服務器上。這裡就不多說。

其他補充

另外@_w同學補充,不刷新頁面還可以通過設置formtarget屬性指向一個當前頁面隱藏的iframe來實現。讓那個iframe去刷新跳轉頁面。上面提到的jQuery Form Plugin也支持你這麼做。
另外再推薦一個插件jquery-iframe-transport

推薦閱讀

uploading-files-with-ajax image-upload-example jquery-progress-bar-for-php-ajax-file-upload

javascript方面我是新手,希望這篇文章能幫到更多遇到相同問題的人。如果哪裡寫的不好或者不對,還希望各位同行能夠善意指出。

 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved