說道上傳圖片，大家并不陌生，不過，在以后開發的項目中，可能并不會讓你使用提交刷新頁面式的上傳圖片，比如上傳頭像，按照常理，肯定是在相冊選擇照片之后，確認上傳，而肯定不會通過form表單，點擊submit刷新式上傳。我為大家介紹兩種異步非刷新式上傳圖片+圖片預覽：第一種，通過現成的uploadfy插件進行上傳，網上好多實例。不過我重點為大家介紹的是第二種，通過Ajax上傳圖片。因為使用uploadfy插件需要設備支持swf格式的Flash，所以對大多數手機來說，第一種方式就沒辦法使用了。首先，我先跟大家說一下上傳原理：通過js控制file文本域，當選擇照片之后，通過Ajax異步提交form表單，然后將圖

片的位置作為返回值，使用js把img的src屬性設置為返回值。

1、首先，在網上下載jQuery.form.js包和jquery-2.0.3.min.js包，注意：引用的時候要把jquery-2.0.3.min.js放在前面，因為jQuery.form.js里面涉及到jQuery方法，如果引用順序不對，js會報錯。

構建HTML代碼：

2、寫Ajax方法：

$(function?()?{

var?files?=?$(".files");

$("#fileupload").wrap("");

$("#fileupload").change(function(){

$("#myupload").ajaxSubmit({

dataType:?'json',

success:?function(data)?{

$("#pic").attr("src","files/"+data);

},

error:function(xhr){

alert("上傳失敗");

}

});

});

});

3、為了驗證一下form表單是否action到action.php里，我們在action.php使用var_dump($_FILES);打印一下。通過firebug看看結果

說明form表單已經提交過來，然后在action使用move_uploaded_file函數將文件移到你想要移動的位置。

下面是詳細的源碼：

Inde.html

$(function?()?{

var?files?=?$(".files");

$("#fileupload").wrap("");

$("#fileupload").change(function(){

$("#myupload").ajaxSubmit({

dataType:?'json',

success:?function(data)?{

$("#pic").attr("src","files/"+data);

},

error:function(xhr){

alert("上傳失敗");

}

});

});

});

Action.php

總結

以上是生活随笔為你收集整理的jq php异步上传图片,PHP+Ajax实现图片异步上传预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。