PHP+Ajax實現文件無刷新上傳文件代碼

2024-09-04 11:45:00

字體：大中小

來源：轉載

供稿：網友

PHP+jQuery Ajax文件上傳實例,因為看到一些朋友詢問如何實現PHP環境下的網頁上傳功能,自己這幾天剛用了jQuery_upload_multiple上傳插件,所以在這里把用法給大家說一下.

要實現基于這個插件的上傳功能,其實挺簡單,需要jquery就行了,另外還有一個上傳文件時的PHP程序,費話不多說,先看下面的HTML,也就是帶有上傳表單,讓用戶選擇上傳文件的頁面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Easy Ajax FormData Upload Multiple Images</title>

<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>

</head>

<body>

<style>

#feedback{width:1200px;margin:0 auto;}

#feedback img{float:left;width:300px;height:300px;}

#ZjmainstaySignaturePicture,#addpicContainer{float:left;width: 100%;}

#addpicContainer{margin-left:5px;}

#ZjmainstaySignaturePicture img{width: 535px;}

#addpicContainer img{float: left;}

.loading{display:none;background:url("http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/ui-anim_basic_16x16.gif") no-repeat scroll 0 0 transparent;float: left;padding:8px;margin:18px 0 0 18px;}

</style>

<div id="addpicContainer">









<img onclick="getElementById('inputfile').click()" style="cursor:pointer;border: 1px solid #AABBCC;" title="點擊添加圖片" alt="點擊添加圖片" src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg">

<input type="file" multiple="multiple" id="inputfile" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>

<span class="loading"></span>

</div>

<div id="feedback"></div>

<script type="text/javascript">

$(document).ready(function(){

//響應文件添加成功事件

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

  //創建FormData對象

  var data = new FormData();

  //為FormData對象添加數據

  $.each($('#inputfile')[0].files, function(i, file) {

   data.append('upload_file'+i, file);

  });

  $(".loading").show(); //顯示加載圖片

  //發送數據

  $.ajax({

   url:'submit_form_process.php',

   type:'POST',

   data:data,

   cache: false,

   contentType: false, //不可缺參數

   processData: false,  //不可缺參數

   success:function(data){

    data = $(data).html();

    //第一個feedback數據直接append，其他的用before第1個（ .eq(0).before() ）放至最前面。

    //data.replace(/</g,'<').replace(/>/g,'>') 轉換html標簽，否則圖片無法顯示。

    if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>'));

    else $("#feedback").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/g,'>'));

    $(".loading").hide(); //加載成功移除加載圖片

   },

   error:function(){

    alert('上傳出錯');

    $(".loading").hide(); //加載失敗移除加載圖片

   }

  });

});

});

</script>

</body>

</html>

接下來是上傳圖片的PHP文件代碼,文件名：submit_form_process.php,代碼如下:

<?php

header('content-type:text/html charset:utf-8');

$dir_base = "./files/"; //文件上傳根目錄

//沒有成功上傳文件，報錯并退出。

if(emptyempty($_FILES)) {

echo "<textarea><img src='{$dir_base}error.jpg'/></textarea>";

exit(0);

}

$output = "<textarea>";

$index = 0; //$_FILES 以文件name為數組下標，不適用foreach($_FILES as $index=>$file)

foreach($_FILES as $file){

$upload_file_name = 'upload_file' . $index;//對應index.html FomData中的文件命名

$filename = $_FILES[$upload_file_name]['name'];

$gb_filename = iconv('utf-8','gb2312',$filename); //名字轉換成gb2312處理

//文件不存在才上傳

if(!file_exists($dir_base.$gb_filename)) {

  $isMoved = false;  //默認上傳失敗

  $MAXIMUM_FILESIZE = 1 * 1024 * 1024;  //文件大小限制 1M = 1 * 1024 * 1024 B;

  $rEFileTypes = "/^＼.(jpg|jpeg|gif|png){1}$/i";

  if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE &&

   preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {

   $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);  //上傳文件

  }

}else{

  $isMoved = true;//已存在文件設置為上傳成功

}

if($isMoved){

  //輸出圖片文件<img>標簽

  //注：在一些系統src可能需要urlencode處理，發現圖片無法顯示，

  //    請嘗試 urlencode($gb_filename) 或 urlencode($filename)，不行請查看HTML中顯示的src并酌情解決。

  $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";//開源代碼Vevb.com

}else {

  $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";

}

$index++;

}

echo $output."</textarea>";

?>