PHP+jQuery+Ajax單(多)圖片上傳
近日寫的一個銷售管理系統中,需要使用者上傳產品的圖片,找了好多外掛,用起來都挺麻煩的而且還不好改,最後找到一篇用php和ajax做圖片上傳的,感覺程式碼挺簡單的而且改起來很容易,轉發到此處與各位分享一下:
我們在本文中用到一個Ajax表單提交外掛:jqery.form.js,有高人修改了幾行程式碼並改名為:jquery.wallform.js,直接拿來用。
HTML部分
我們在頁面上放置一個form表單,使用post提交到後臺php處理程式upload.php,注意enctype屬性設定要支援檔案上傳。#preview用來顯示上傳完畢後的圖片。關於css樣式設定本文不加說明,請參照下載包的原始碼。
<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
<div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div>
<div id="up_btn" class="btn">
<span>新增圖片</span>
<input id="photoimg" type="file" name="photoimg">
</div>
</form>
<p>最大100KB,支援jpg,gif,png格式。</p>
<div id="preview"></div>
jQuery部分
本例項基於jQuery,因此必須在頁面中載入jquery庫以及jquery.wallform.js。
當點選按鈕“新增圖片”後,彈出選擇檔案對話方塊,選擇要上傳的圖片後,觸發change事件。然後表單#imageform呼叫jquery.wallform.js的ajaxForm()方法,將表單資料提交給後臺PHP處理,並根據返回結果處理頁面元素的展示。如果上傳成功,圖片會一張張排列顯示在頁面上。關於ajaxForm()的使用可以參照本站文章:Ajax表單提交外掛jqery form。
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
$(function(){
$('#photoimg').die('click').live('change', function(){
var status = $("#up_status");
var btn = $("#up_btn");
$("#imageform").ajaxForm({
target: '#preview',
beforeSubmit:function(){
status.show();
btn.hide();
},
success:function(){
status.hide();
btn.show();
},
error:function(){
status.hide();
btn.show();
} }).submit();
});
});
PHP部分
upload.php處理圖片上傳,並將上傳好的圖片儲存在uploads/目錄,注意該目錄要有寫許可權。首先需要檢測是否為POST方式提交,然後判斷圖片格式、圖片大小是否符合要求,然後使用move_uploaded_file()上傳圖片,並將圖片重新命名,格式為:time().rand(100,999)。
$path = "uploads/";
$extArr = array("jpg", "png", "gif");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(empty($name)){
echo '請選擇要上傳的圖片';
exit;
}
$ext = extend($name);
if(!in_array($ext,$extArr)){
echo '圖片格式錯誤!';
exit;
}
if($size>(100*1024)){
echo '圖片大小不能超過100KB';
exit;
}
$image_name = time().rand(100,999).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$image_name)){
echo '<img src="'.$path.$image_name.'" class="preview">';
}else{
echo '上傳出錯了!';
}
exit;
}
//獲取檔案型別字尾
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
return $extend;
}
在專案實際中,我將php中輸出的內容(無論錯誤資訊或者是最後的檔案路徑)都返回到了原頁面,在每次上傳一張圖片時就將圖片路徑用js拼接在一起,並寫入儲存在了一個hidden的input中(寫入直接用js獲取input的id值並$(“#id”).val(path)即可),在提交表單時連同所有資訊提交過去,這樣就能根據php返回的資訊判斷圖片是否上傳成功。
以上是多圖的上傳模式。
如果要變成單圖上傳,只要在每次上傳前清空input的值,然後再提交表單到後臺即可。
缺點
此外掛有一點不好的地方就是當你上傳錯圖片重新上傳新的圖片時,原先的圖片仍會被上傳至伺服器,存在錯誤冗餘的問題。改進方法可能是需要自己寫一個伺服器小程式進行處理,具體依據專案而行。
相關推薦
PHP+jQuery+Ajax單(多)圖片上傳
近日寫的一個銷售管理系統中,需要使用者上傳產品的圖片,找了好多外掛,用起來都挺麻煩的而且還不好改,最後找到一篇用php和ajax做圖片上傳的,感覺程式碼挺簡單的而且改起來很容易,轉發到此處與各位分享一下: 我們在本文中用到一個Ajax表單提交外掛:jqery.
Java伺服器部署基於OpenCV的C++影象處理專案(三)圖片上傳並返回處理圖
Java伺服器部署基於OpenCV的C++影象處理專案(三)圖片上傳並返回處理圖 1.上傳圖片並返回灰度圖功能 由於使用的springboot開發,直接寫一個upload介面供圖片上傳,以下是springboot主函式以及upload介面。 package com.e
使用plupload.js實現單頁面多例項圖片上傳
工作中經常會遇到單頁面多個上傳模組的功能,比如身份證正反面。使用plupload.js可以非常簡單的實現這個功能。 github下載地址 https://github.com/moxiecode/plupload/tree/master/js 新建plupload.htm
jquery+ajax+servlet實現無重新整理圖片上傳
需要藉助ajaxfileupload.js來實現ajax圖片上傳功能。 html部分: <body> <input id="img" type="file" name="img">//id和name屬性必須都有且同名。。。 <input type="but
(檔案)圖片上傳,Spring或SpringMVC框架
spring或springMVC框架圖片(檔案)上傳 頁面部分,用一個簡單的form表單提交檔案,將圖片或檔案提交到服務端。一個輸入框,用於輸入圖片的最終名稱,一個file檔案選擇,用於選擇圖片。 頁面程式碼如下: <form id="form1" &g
微信小程式開發(二)圖片上傳+服務端接收
上次介紹了小程式開發中的微信登入。文章: 微信小程式開發(一) 微信登入流程, 這次介紹下小程式當中常用的圖片上傳。 前幾天做了圖片上傳功能,被坑了一下。接下來我們來看一下微信的上傳api。 這裡的filePath就是圖片的儲存路徑,型別居然是個
伺服器開發之Unity3d(C#)圖片上傳下載
一、前言 遊戲中圖片的上傳下載是一個亙古不變的話題,這次在開發遊戲伺服器的過程中也不可避免的出現了圖片下載和上傳的問題。遇到了PNG圖片下載完成後透明的部分變成黑色、圖片上傳附帶驗證資訊、下載後文件不一樣的問題。 二、問題回顧 伺服器上面儲存了
在jsp頁面中新增富文字編譯器(ueditor)+ 圖片上傳功能
一次老大讓我把文字的編輯區域加一個富文字編譯器,於是馬上下載了一個kindEditor來試試,但後來老大推薦說百度的ueditor編譯器不錯,於是我便懷著擴充套件知識,又學到一個新東西的心理下載了百度的ueidtor編譯器,整合到專案中感覺確實不錯,今天就和大家分享下這個富文字編譯器的使用…… 下載
多組input檔案,每組 multiple選擇多張圖片上傳可增刪其中任意一張圖片,用formData物件實現;(ajax做非同步,自己做延時同步)
input 、multiple選擇多張圖片時,需要刪除其中的一張圖片怎麼做,大家都知道 input 中的檔案是不能刪除和更改的,只能清空,這裡我的做法是 定義一個物件儲存器把需要的檔案存在儲存器中 formData,後臺不從Input中讀取,從物件儲存器中獲取檔案,一組圖片使
單(多)行文本溢出顯示省略號...
標簽 div blog white 元素 pac nor 盒子模型 flow 一、單行文本 width:XXXpx;overflow: hidden; //溢出隱藏 text-overflow: ellipsis; //顯示省略號來代替被修剪的文本 white-space
通過python實現TCP在客戶端和伺服器上的單(多)執行緒的程式設計
1、只支援一個客戶端訪問 伺服器: from socket import * address='127.0.0.1' #監聽哪些網路 127.0.0.1是監聽本機 0.0.0.0是監聽整個網路 port=12345 #監聽自己的哪個埠 buffsize=
php mysql ajax 單表多欄位多關鍵詞查詢
單表多欄位查詢在一些稍微複雜一點的查詢中十分有用。本文主要利用MySQL資料庫中的concat函式實現單表多欄位多關鍵詞查詢。並且顯示查詢結果的表格可根據所選資料表動態生成。 html程式碼 <!DOCTYPE html> <html> <h
用原生JS實現多張圖片上傳及預覽功能(相容IE8)
最近需要做一個圖片上傳預覽的功能(相容IE8-11、chrome、firefox等瀏覽器),網上現有的檔案上傳元件(如webuploader)總是會遇到一些相容性問題。於是我參考了一些博文(連結找不到了⊙o⊙…),自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能:
ssm+Jquery+Ajax+pagehelper(頁面)
本篇文章分兩部分,這是頁面部分,還有後端部分。 <!-- jsp頁面實現分頁功能必要3個js 。 1.jquery.js 2.jquery.paging.js 3. stringbuffer.js--> 注:上面js檔案可以到相應的官網下載
前端上傳圖片到oss服務,模仿微博多張圖片上傳(最多九張)
效果圖如下 核心js檔案 推薦《前端上傳元件Plupload使用指南》,有較詳細使用指南。 檔案地址: https://www.cnblogs.com/2050/p/3913184.html#plupload_doc4 首先是css檔案的引入 上傳元
Unity+Slua實現遊戲常用UI元件(六)——單(多)元素滾動佈局元件
單元素滾動佈局元件——LSIScrollView 定義 單元素滾動佈局元件下只有一種元素,支援元素自動佈局並在滾動過程中元素複用 元件效果展示 LSIScrollView效果展示 LSIScrollView元素複用 特性 建立滿足Mask顯示的最小
HTML5+Canvas+jQuery呼叫手機拍照功能實現圖片上傳(二)
上一篇只講到前臺操作,這篇專門涉及到Java後臺處理,前臺通過Ajax提交將Base64編碼過的圖片資料資訊傳到Java後臺,然後Java這邊進行接收處理,通過對圖片資料資訊進行Base64解碼,之後使用流將圖片資料資訊上傳至伺服器進行儲存,並且將圖片的路徑地址存進資料庫。
jquery-uploadfile的使用(多檔案非同步上傳)
需求 在頁面端可以在頁面不重新整理情況下上傳多個有大小限制的word檔案,並返回檔案儲存的路徑,同時可以刪除誤上傳的檔案。 效果 解決方案 準備 下載該外掛 該外掛依賴jquery1.9.1版本(其它不清楚) *在jsp頁面中引入樣
iOS多張圖片上傳多執行緒處理方法(可獲取最後一張上傳狀態後的訊號)
環境重現 1,服務端提供單張上傳的介面。 2,客戶端需求同時提交多張圖片上傳。 3,使用AFNetWorking 或 自封裝的帶有block回撥網路狀態的框架。 思路 1,建立一個管理類。 2,提供一個單例方法。保證管理類唯一 3,提供一個公共
關於Ajax ,jQuery以及jQuery Ajax 程式設計 (二)
介紹: 什麼是jQuery? jQuery 庫 - 特性 jQuery 是一個 JavaScript 函式庫。 jQuery 庫包含以下特性: HTML 元素選取HTML 元素操作CSS 操作HTML 事件函式JavaScript 特效和動畫HTML DOM 遍歷和修改