vue上傳文件php,php文件上傳 – 前端開發,JQUERY特效,全棧開發,vue開發

文件上傳一般有下面2種方式:

有兩種:

1、標準input表單方式,典型的用$_FILES進行接收;

2、以Base64的方式進行傳送,一般是AJAX異步上傳。

第一種

標準的input表單方式,適用于大文件進行上傳,同時支持批量。html代碼關鍵的幾句:

不同的name時:

其中enctype="multipart/form-data"對于文件上傳是必不可少的。另外type="file"設置input類型,accept="image/*"指定優先上傳圖片(MIME 參考手冊)。multiple支持一次選多個文件,pic[]以數組的形式接收多個文件。手機端端還可以加入參數capture="camera"選擇攝像頭拍照上傳。

后端處理:

通過$_FILES獲取上傳的文件。

$files = $_FILES;

傳多個文件時,如果name不同,則返回的$_FILES數組格式不同。

name相同時:

array(1) {

["id_pic"] => array(5) {

["name"] => array(2) {

[0] => string(5) "1.jpg"

[1] => string(5) "2.jpg"

}

["type"] => array(2) {

[0] => string(10) "image/jpeg"

[1] => string(10) "image/jpeg"

}

["tmp_name"] => array(2) {

[0] => string(27) "C:\Windows\Temp\php7A7E.tmp"

[1] => string(27) "C:\Windows\Temp\php7A7F.tmp"

}

["error"] => array(2) {

[0] => int(0)

[1] => int(0)

}

["size"] => array(2) {

[0] => int(77357)

[1] => int(56720)

}

}

}

name不相同時:

array(2) {

["id_pic_1"] => array(5) {

["name"] => string(5) "1.jpg"

["type"] => string(10) "image/jpeg"

["tmp_name"] => string(27) "C:\Windows\Temp\phpBBEE.tmp"

["error"] => int(0)

["size"] => int(77357)

}

["id_pic_2"] => array(5) {

["name"] => string(5) "2.jpg"

["type"] => string(10) "image/jpeg"

["tmp_name"] => string(27) "C:\Windows\Temp\phpBBEF.tmp"

["error"] => int(0)

["size"] => int(56720)

}

}

在對$_FILES進行foreach遍歷時,前面那種輸出格式不大方便。后面那種就可以直接遍歷。我們可以寫個方法進行統一轉換:

function dealFiles($files) {

$fileArray = array();

$n = 0;

foreach ($files as $key=>$file){

if(is_array($file['name'])) {

$keys = array_keys($file);

$count = count($file['name']);

for ($i=0; $i

$fileArray[$n]['key'] = $key;

foreach ($keys as $_key){

$fileArray[$n][$_key] = $file[$_key][$i];

}

$n++;

}

}else{

$fileArray = $files;

break;

}

}

return $fileArray;

}

好,前面講到后端如何處理接收到的$_FILES數組,并轉換成統一格式。接下來任務主要是:

1、檢測上傳的文件是否非法;

2、檢測上傳的文件是否超過大小;

3、檢測保存的路徑是否存在,是否可寫;

4、文件重命名;

其中上傳過程中用到了個很重要的函數:move_uploaded_file(filename , $destination )進行文件移動操作。將$_FILES['id_pic']['tmp_name']移動到新的路徑里。當然,移動前可以用is_uploaded_file($_FILES['id_pic']['tmp_name'])進行判斷文件是否正常上傳的。

多文件上傳則是循環的方法多次使用move_uploaded_file()進行移動操作。

第二種

主要以上傳圖片為主。

利用input的change事件,借助canvas對圖片進行處理(例如壓縮),然后ajax發送文件流到后端。

基本原理是通過canvas渲染圖片,再通過 toDataURL 方法壓縮保存為base64字符串(能夠編譯為jpg格式的圖片)。

后端處理:

后端最終會收到前端發送的base64字符串,接著處理字符串為圖片即可。具體請使用關鍵字base64 轉 image 開發語言進行谷歌|百度。前端生成的結果中有一個base64Len,這是字符串的長度,后端應該核對以確認是否提交完整。參考:52fhy/localResizeIMG4: 前端本地客戶端壓縮圖片,兼容IOS,Android,PC、自動按需加載文件

//php示例:

$img = base64_decode($_POST['img']);

$img = imagecreatefromstring($img);

作者:飛鴻影

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/260218.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/260218.shtml
英文地址,請注明出處:http://en.pswp.cn/news/260218.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HDU 1003 Max Sum

同上題一樣&#xff0c;求連續子序列的最大和 而且比上題還要簡單一些&#xff0c;用不到long long了 直接水過 1 //#define LOCAL2 #include <iostream>3 #include <cstdio>4 #include <cstring>5 using namespace std;6 7 const int maxn 100000 10;8 in…

linux中如何查看進程占用了哪些端口?

使用netstat –apn | grep <進程名>便可以查看指定進程所占用的端口。轉載于:https://www.cnblogs.com/x10322/p/6020485.html

python畫端午節_我想帶你去旅行,我用Python提前做了一份端午旅游攻略,請收下!...

旅游是調節心情的有效途徑&#xff0c;越來越多的上班族和學生期待利用假期時間外出游 玩來開拓眼界、舒緩壓力。然而真正有了假期&#xff0c;許多人卻會因“去哪玩”的問題倍感困惑&#xff0c;六月份正是出行的好時節&#xff0c;期間還有端午節小長假&#xff0c;就讓我們一…

iOS: 在Object-C中監聽javascript事件( Javascript communicating back with Objective-C code)

在iOS開發之Objective-C與JavaScript交互操作 中我們可以通過stringByEvaluatingJavaScriptFromString 去實現在obj-C中獲取到相關節點屬性&#xff0c;添加javascript代碼等功能。但是我們如何監聽到javascript的響應事件呢。在MAC OS中有效的API去實現&#xff0c;但iPhone沒…

ECharts-圖表回執組件

測試地址&#xff1a;http://echarts.baidu.com/doc/example.html轉載于:https://www.cnblogs.com/HOH/p/3868617.html

matlab r2007課后答案,《MATLAB R2007基礎教程》習題答案.doc

打開“圖形窗口”&#xff0c;熟悉其中各個菜單和工具的功能和用法參考答案&#xff1a;略編寫程序&#xff0c;該程序在同一窗口中繪制函數在 之間的正弦曲線和余弦曲線&#xff0c;步長為 &#xff0c;線寬為 4 個象素&#xff0c;正弦曲線設置為藍色實線&#xff0c;余弦曲線…

第一本書14單元

14.linux中設備的訪問*****1.設備的訪問******1.設備識別/dev/xdxn /*硬盤設備/dev/sdal/dev/cdrom /*光驅/dev/mapper/* /*虛擬設備****.設備的發現*****fdish -l /*查看真實存在的設備cat /proc/partition /*系統能夠識別的設備blkid /*系統能夠掛載使用的設備df /*查看設備被…

夜深了,發點無聊的東西

研究一個東西遇到gcnew這個關鍵詞&#xff0c;mark一下&#xff01;new和gcnew的區別。 C/CLI中使用gcnew關鍵字表示在托管堆上分配內存&#xff0c;并且為了與以前的指針區分&#xff0c;用^來替換* &#xff0c;就語義上來說他們的區別大致如下: 1. gcnew返回的是一個句…

變速積分pid控制器matlab,變速積分PID控制系統設計.docx

課程設計報告設計題目變速積分PID控制系統設計課程名稱計算機控制技術B姓名 蘇丹學號 2008100731班級自動化0803 教師閆高偉摘 要錯誤!未定義書簽。Abstract第1章數字PTD及變速積分簡介錯誤!未定義書簽。TOC \o "1-5" \h \z 1數字PTD發展介紹1HYPERLINK \l "boo…

百度關鍵詞抓取工具_VBA利用XMLHTTP抓取百度查詢關鍵詞結果的個數

大家好,我們今日講解"利用XMLHTTP抓取百度查詢關鍵詞結果的個數"&#xff0c;這節內容是"VBA信息獲取與處理"教程中第六個專題"VBA中利用XMLHTTP完成網抓數據"的第二節。第二節 利用XMLHTTP抓取百度查詢關鍵詞結果的個數在上一講中我們講解了一些…

多系統通訊-DotNetMQ

很久都沒有寫博客了&#xff0c;從15年4月份一直忙到現在&#xff0c;我才有時間去做梳理和總結&#xff0c;因為我提離職了&#xff0c;感覺整個世界突然變得不一樣&#xff0c;隨著而來的就是心情的放松&#xff0c;寫一篇文章也是對過去一年多工作的梳理&#xff0c;加深印象…

九大現代病!中槍了嗎?

現代人在享受現代化的生活和工作方式帶來的便捷之時&#xff0c;也為此付出了不小的代價&#xff0c;下面列出的九大現代病就是典型的例子&#xff0c;看看你有沒有中槍。 辦公臀 常坐辦公室&#xff0c;如果你發現屁股越坐越大&#xff0c;大腿越坐越粗&#xff0c;你可能有了…

Java學習筆記(4)——枚舉類型

1.在類別&#xff08;Class&#xff09;或接口&#xff08;Interface&#xff09;中宣告常數加以管理&#xff0c;這只是讓您存取與管理常數方便而已&#xff0c;來看看這個例子&#xff1a; public void someMethod() {....doOp(OpConstants.TURN_RIGHT);.... } public void d…

驅動提取軟件_深入分析施耐德工控軟件代碼執行漏洞

更多全球網絡安全資訊盡在邑安全簡介在本文中&#xff0c;我們將為讀者詳細介紹Claroty Research團隊的Amir Preminger和Sharon Brizinov是如何組合利用兩個漏洞&#xff0c;來觸發施耐德工控軟件EcoStruxure Operator Terminal Expert的代碼執行漏洞&#xff0c;從而在首屆舉辦…

ubuntu 網卡突然無法連接

今天要用到VM BT的Namp掃描服務器端口&#xff0c;發現橋接后無法使用。ifconfig 只看到 lo地址&#xff0c;看不到以太網網卡地址使用lspci 查看是否安裝了以太網網卡驅動lscpi | grep Ethernet02:01.0 Ethernet controller: Advanced Micro Devices [AMD] 79c970 [PCnet32 LA…

atitit.表單驗證 的dsl 本質跟 easyui ligerui比較

atitit.表單驗證的dsl 本質跟 easyui ligerui比較 1. DSL 聲明驗證 1 2. 自定義規則 1 3. 正則表達式驗證,可以擴展實現 2 4. 犯錯誤消息提示,generic canBeEmpty is good 3 5. Prevent the form to submit when invalid 3 6. 為空則不驗證&#xff0c;不為空則驗證&#xff0…

StartActivityForResult

StartActivity 用startActivityForResult(intent, requestcode);啟動子功能模塊activity onActivityResult(int requestCode, int resultCode, Intent data)對子activity返回進行判斷處理 public class StartActivity extends Activity implements OnClickListener {private Bu…

micropython 串口寫文件_MicroPython通過2G模塊串口收發短信

集成2G通信、定位模組&#xff0c;賦予物聯網特性。本例使用M6220&#xff0c;它是一款基于eSIM技術的2G模組&#xff0c;支持GSM/GPRS&#xff0c;提供GPS北斗雙模定位功能&#xff0c;并具備一定的數據處理能力&#xff0c;其2G工作頻段有GSM850、GSM900、DCS1800和PCS1900&a…

洛谷P1130 紅牌

題目描述 某地臨時居民想獲得長期居住權就必須申請拿到紅牌。獲得紅牌的過程是相當復雜 &#xff0c;一共包括N個步驟。每一步驟都由政府的某個工作人員負責檢查你所提交的材料是否符合條件。為了加快進程&#xff0c;每一步政府都派了M個工作人員來檢查材料。不幸的是&#xf…

GPS坐標換算

30.8872 》——>300.8872*60 53.232 ——>530.232*60 13.9230: 53 13.92"30: 53 13.92"》3053/6013.92/360030.887199同經度兩點之間距離dla30.887m * [差值/(1/3600)] 30.887m * 差值 *3600 111193.2m * 差值 同緯度兩點之間距離dlo30.887m * [差值/(1…