jQuery Plugins - 透過jQuery form來實現上傳圖片不刷頁 2017-01-10
主要這個外掛套件來自於這裡.
http://malsup.com/jquery/form/
前端的準備工作,
請先於head的區塊中加入下列
<script type="text/javascript" src="jQ.form的外掛存取位置"></script>
然後以下為你的上傳檔案區塊
<form method="post" enctype='multipart/form-data' action="上傳檔案.php">
<input type="file" name="img_files"/>
<input type="submit" name="submit"/>
</form>
恩,
講白了其實跟傳統的上傳方式寫得一模一樣,
再來是js區塊寫的內容.var percentVal;
var options = {
beforeSend: function(){
percentVal = '0%';
$("顯示進度區塊").text('上傳中:' + percentVal); },
uploadProgress: function(event, position, total, percentComplete) {
percentVal = percentComplete + '%';
$("顯示進度區塊").text('上傳中:' + percentVal); }, //顯示目前的進度
success: function(data, textStatus, jqXHR) {
$("顯示進度區塊").text('上傳中:100%'); },
complete: function(xhr) {
$("目標資料").prepend("ajax送出資料"); }, //傳送成功時回送資料
error: function(xhr){
$("顯示進度區塊").text('上傳中:100%'); }
}
$(document).ready(function(){
$('form').ajaxForm(options); //加入當form送出submit時,執行時使用ajaxForm的動作.
});
大致上就可以實現不刷頁上傳的方式.