ajax結合文件上傳類進行多文件的單個上傳

時間 2020-08-28

標籤 ajax 結合文件上傳進行單個欄目 Ajax 简体版

原文原文鏈接

今天作項目的時候遇見一個問題:以前一個同事離職以前作了一個網站,有一個上傳商品詳細圖片的功能,當時已經完成,可是因爲後期程序的有更改以及更改的程序員的水平也是良莠不齊,最後致使程序bug不少,因爲當時用的是一個框架,最終也沒找到說明文檔,後來我就從新寫了一個結合ajax上傳文件的upload.classs.php雖然界面欠缺美觀,可是通俗易懂好維護.
php

//首先是頁面.html

index.phpmysql

<!DOCTYPE html>jquery

<html lang="en">程序員

<head>ajax

<title>upload</title>數據庫

</head>

<body>

</form>

</form>

</body>

$(":file").change(function(){

if(!$(this).val())

{

alert('請選擇圖片!');

return false;

}

$("#picform").ajaxSubmit({

type:'post',

url:'upload.php',

success:function(data){

switch(data)

{

case '0':

alert('文件存放目錄不存在');

break;

case '1':

alert('系統錯誤,請檢查環境配置');

break;

case '2':

alert('文件類型不容許');

break;

case '3':

alert('文件大小有誤');

break;

default:

var obj= $.parseJSON(data);

//生成縮略圖

$("#pics").append("<img width='100px' height='100px' src="+obj.relpicpath+" />");

var len= $("#infofrom :hidden").length;

if(len==0)

{

$("#infofrom").append("<input type='hidden' value='"+obj.picname+"' id='picname' name='picname'>");

$("#infofrom").append("<input type='hidden' value='"+obj.picpath+"' id='picpath' name='picpath'>");

$("#infofrom").append("<input type='hidden' value='"+obj.relpicpath+"' id='relpicpath' name='relpicpath'>");

}

else

{

$("#picname").val($("#picname").val()+','+obj.picname);

$("#picpath").val($("#picpath").val()+','+obj.picpath);

$("#relpicpath").val($("#relpicpath").val()+','+obj.relpicpath);

}

break;

}

})

</script>

</html>

//接收前臺ajax的頁面

upload.php

<?php

include_once 'Upload.class.php';

$obj=new Upload('uploads',array('.jpg'),3145728,'file');

$arr=$obj->uploadFiles();

if(is_array($arr))

{

echo json_encode($arr);

}

else

{

echo $arr;

}

//簡單的文件上傳類

upload.class.php

<?php

//文件上傳類

class Upload{

private $path; //上傳路徑

private $allowtype=array(); //資源類型

private $maxsize; //容許上傳的文件大小

private $file; //file表單的name

private $error=1; //定義路徑不存在的錯誤

//構造方法

public function __construct($path,$allowtype,$maxsize,$file)

{

$this->path = $path;

//首先檢查文件路徑是否存在

if(!file_exists($this->path))

{

$this->error=0;

// exit('ERROR:文件路徑不存在!');

}

$this->allowtype = $allowtype;

$this->maxsize = $maxsize;

$this->file = $file;

}

//上傳一個資源的方法

public function uploadFiles()

{

if($this->error==0)

{

return 0;

}

//首先判斷系統是否容許上傳,以及有沒有出現error

$eor= $_FILES[$this->file]['error'];

if($eor!=0)

{

return 1;//異步傳輸專用

// exit("ERROR:錯誤編號:{$eor}!");

}

//判斷文件的擴展名

$suf= strrchr($_FILES[$this->file]['name'],'.');

if(!in_array($suf,$this->allowtype))

{

return 2;

// exit('ERROR:文件類型被拒絕!');

}

//判斷文件的大小

$size= $_FILES[$this->file]['size'];

if($size>$this->maxsize)

{

return 3;

// exit('ERROR:文件過大!');

}

/*當知足上面全部的條件的時候,進行文件上傳

而且返回資源的絕對路徑

相對路徑

以及文件名*/

$tempname = $_FILES[$this->file]['tmp_name'];

date_default_timezone_set('PRC');

$newname = date('YmdHis').'-'.mt_rand(100,999).$suf;

$rootpath=dirname(__FILE__).'/'.$this->path.'/'.$newname;

if(move_uploaded_file($tempname,$this->path.'/'.$newname))

{

return array('picname'=>$newname,'picpath'=>$rootpath,'relpicpath'=>$this->path.'/'.$newname);

}

//前臺頁面提交表單後的入庫頁面

model.php

<?php

$dbh=new PDO('mysql:host=localhost;dbname=test;','root','');

$dbh->exec('set names utf8');

$_POST['picpath']=addslashes(str_replace('/', '\\', $_POST['picpath']));

$sql="insert into mytab (picname,picpath,relpicpath) values

('$_POST[picname]','$_POST[picpath]','$_POST[relpicpath]')";

$info=$dbh->exec($sql);

//解釋:頁面很是的簡單,固然這是測試用的.

邏輯過程:

1.前臺頁面index.php:第一個表單專門用來添加圖片.經過change事件觸發當前表單提交事件.

2.在提交的upload.php頁面中,引入upload.class.php.經過數字註釋能夠獲得每一個不一樣的錯誤返回(在index.php中頁面底部的js部分),當上傳成功的時候返回圖片的絕對地址(更新或者刪除數據的時候以便刪除沒用的圖片),圖片的名稱,以及圖片的相對地址(頁面展現使用).

3.upload.class.php的返回值經過upload.php進行進一步的判斷,若是是數組說明上傳成功,若是是單個的數字,說明上傳失敗.而且將信息返回給前臺.

4.index.php接收到upload.php返回的信息,若是爲單個數字的話,進行相應的錯誤提醒.若是是一個json格式的數據,那個經過$.parseJSON將其轉變成json對象,而且在下面的js代碼中進行調用. 分別爲:在頁面的第二個form表單中建立input:hidden,將所須要的信息存儲起來以便在提交表單的時候進行使用.同時這裏也作了一個判斷,若是第二個form表單中已經存在樂hidden說明已經不是第一張圖片了,因此直接將以後的圖片拼接在hidden的value後面.同時,若是成功的話在id爲pics的div中會出現100*100縮略圖.

5.最後在index.php中點擊submit提交全部的圖片信息準備入庫.在model.php中,直接實例化了pdo,寫了一條sql語句進行了測試,結果沒有問題.

注意:index.php中要引入:jquery.form.js

在model.php中addslashes()函數很重要,在數據庫中單獨的一條斜線"\"在我本次的測試中在數據庫中這條斜線就不見了.以前也碰掉相似的問題,當時是沒有插入進去.因此在這裏進行一次轉義.

到此整個過程完成.

做爲一個php新人,但願在這裏和你們共同進步,這個程序可能安全行,性能什麼的我都沒有考慮到,用起來可能也有必定的侷限性.但願你們多多指點.