當前位置:首頁 » 文件管理 » phphtml5多圖上傳

phphtml5多圖上傳

發布時間: 2022-06-07 05:17:32

Ⅰ 怎樣用html5實現拖拽上傳文件

,首先要判斷拖入的文件是否符合要求,包括圖片類型、大小等,然後獲取本地圖片信息,實現預覽,最後上傳。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽區域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默認瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對象
//檢測是否是拖拽文件到頁面的操作
if(fileList.length == 0){
return false;
}
//檢測文件是不是圖片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是圖片!");
return false;
}

//拖拉圖片到瀏覽器,可以實現預覽功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //圖片名稱
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上傳大小不能超過500K.");
return false;
}
var str = "<img src='"+img+"'><p>圖片名稱:"+filename+"</p><p>大小:"+filesize+"KB</p>";
$("#preview").html(str);

//上傳
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();
fd.append('mypic', fileList[0]);

xhr.send(fd);
},false);
});

Ⅱ php + js實現多文件上傳問題

我所知目前有三種方式可以實現你的要求:

  1. 基於iframe,無進度顯示,不推薦。記得有個國外的dhtmlx框架里有個多文件upload組件

  2. 基於flash,多文件,可以顯示上傳進度。這個常用的就是swfupload和其衍生版jquery.uploadify

  3. 基於html5,多文件,可以顯示上傳進度。如果你的目標瀏覽器支持的話推薦使用,使用html5的file/filereaderAPI即可實現純Html+js的多文件可視進度上傳

Ⅲ html5拖拽圖片上傳,怎麼獲得圖片原始尺寸

用後台語言去獲取不就可以了。為什麼一定要在前端來獲取圖片原始大小呢?即使你要在前端實用,比如PHP獲取到了以後還是可以通過變數傳遞給前端的。至於PHP怎麼獲取圖片原始大小這個網上很容易找到資料!

Ⅳ 請問各位大神,如何實現php手機網站圖片上傳,它和普通web站的區別在哪裡

沒區別。去干吧。少年。

Ⅳ 如何在手機瀏覽器中運用HTML5的文件API實現上傳多圖功能

Html5終於解決了上傳文件的同時顯示文件上傳進度的老問題。現在大部分的網站用Flash去實現這一功能,還有一些網站繼續採用Html <form>with enctype=multipart/form-data,但是需要修改伺服器端可用才能顯示給用戶文件上傳的進度。本質上你需要做的工作是在伺服器端接收一個文件時,你發送給它一個位元組流,所以你需要知道你已經接收到多少位元組並以某種方式傳達這些信息給客戶端瀏覽器,在這個過程一直在不斷的進行文件的上傳。這種方式運行的非常好,不像Flash上傳那這樣充滿了問題(特別是處理大文件上傳的時候),然而這種方法是相當復雜的並且聽起來不容易理解,因為你本質上是接管了整個伺服器端的處理(獲取位元組流的時候)同時包括了在伺服器端實現multipart/form-data協議,伴隨一系列的其他事情。
使用Html5 上傳文件
XMLHttpRequest 在Html5 規范中已經有全新的變化,規定了XMLHttpRequest Level 2規范(目前最新版本)包含下列新的特性:
處理位元組流,例如作為上傳或者下載的File,Blob,FormData對象
上傳或者下載中的進度事件
跨站點請求
允許創建匿名請求
可以設置請求超時
在這篇文章中我們將能夠更清楚的看到#1和#2兩個特性。通常,上傳文件用XMLHttpRequest並且提供上傳進度信息給最終的用戶,需要注意的是這種方式解決了不需要伺服器端做任何改變,至少是目前處理multipart/form-data協議。所以伺服器端的處理邏輯保留不變,這使得開發者適應這種技術相當容易。
圖1:文件上傳畫面-准備上傳 圖2:顯示上傳完成畫面
注意:上面的圖片中,信息提示區域是提供給用戶的:
當前選中文件的信息
文件名
文件大小
文件類型
上傳完成多少的百分比進度條
上傳速度或者上傳帶寬
距離上傳完成大概還有多長時間
已上傳文件大小
伺服器端的響應
上面第6項或許看起來不重要,但事實上是相當重要的。因為我們用XMLHttpRequest,上傳發生在後台,頁面沒有發生跳轉等任何變化,所以對於你用它處理其他一些事情來說是一個非常好的特性。
Html5 Progress Event
對於Html5 Progress Events規范,Html5 Progess Events提供了下列與本次討論相關的信息
total - 總的位元組數
loaded - 到目前為止上傳的位元組數
lengthComputable - 可計算的已上傳位元組
請注意到我們需要用兩個信息去計算要顯示給用戶的其他所有信息。要計算出來其他的信息通過上面我們得到信息是相當容易的,但是那需要一些額外的代碼並且創建一個定時器。
Html5 Progress Event 應該是什麼
考慮到有一部分人想更好的提供給用戶所有的信息,所以Html5 Progress Event應該更好的滿足需要,因為它給瀏覽器供應商提供這些額外信息是相當簡單的,所以建議progress event應該修改成如下:
total - 總的位元組數
loaded - 到目前為止上傳的位元組數
lengthComputable - 可計算的已上傳位元組
transferSpeed long類型
timeRemaining javaScript 日期對象
Html5 上傳 用XMLHttpRequest
瀏覽器支持情況
支持這一特性的瀏覽器最低版本
Firefox 4.0 beta 6
Chrome 6
Safari 5.02
IE 9 Beta and Opera 10.62 不支持這一特性
簡單的示例
下面是一個完整的Html頁麵包含了實現文件上傳並帶有進度提示的JavaScript代碼,只是實現了基本的功能,感興趣的可以自己做擴展。 需要吧上傳介面修改成自己服務的。

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "upload.do");//修改成自己的介面
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* 伺服器端返回響應時候觸發event事件*/
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>

Ⅵ 如何使用html5實現拍照上傳應用

單純HTML5沒法做 需要後台技術 你可以看下關於.NET JSP PHP 最新的NODEJS
必定有很成熟的調用攝像頭拍照的介面或庫。
你可能需要系統學習的有
HTML5
CSS3
JAVASCRIPT JQUERY等
選擇一項你喜歡的後台語言。

Ⅶ HTML5 做的移動 web app 怎樣實現從本地上傳圖片

當然可以,不過只能從相冊里傳

Ⅷ PHP、HTML5上傳圖片自動壓縮問題

給你個圖片處理的類吧,圖片剪裁處理後,也就等於將圖片壓縮了。

/**
*圖像處理類
*============================================================================
*Copyright2014大秦科技,並保留所有權利。
*網站地址:http://www.qintech.net;
*============================================================================
*/
classImage{

//生成縮略圖的方式
public$thumbType;
//縮略圖的寬度
public$thumbWidth;
//縮略圖的高度
public$thumbHeight;
//生成縮略圖文件名後綴
public$thumbEndFix;
//縮略圖文件前綴
public$thumbPreFix;

/**
*構造函數
*/
publicfunction__construct(){
$this->thumbType=1;
$this->thumbWidth=120;
$this->thumbHeight=60;
$this->thumbPreFix='';
$this->thumbEndFix='_thumb';
}

/**
*檢測是否為圖像文件
*@param$img圖像
*@returnbool
*/
privatefunctioncheck($img){
$type=array(".jpg",".jpeg",".png",".gif");
$imgType=strtolower(strrchr($img,'.'));
returnextension_loaded('gd')&&file_exists($img)&&in_array($imgType,$type);
}

/**
*獲得縮略圖的尺寸信息
*@param$imgWidth原圖寬度
*@param$imgHeight原圖高度
*@param$thumbWidth縮略圖寬度
*@param$thumbHeight縮略圖的高度
*@param$thumbType處理方式
*1固定寬度高度自增2固定高度寬度自增3固定寬度高度裁切
*4固定高度寬度裁切5縮放最大邊原圖不裁切
*@returnmixed
*/
privatefunctionthumbSize($imgWidth,$imgHeight,$thumbWidth,$thumbHeight,$thumbType){
//初始化縮略圖尺寸
$w=$thumbWidth;
$h=$thumbHeight;
//初始化原圖尺寸
$cuthumbWidth=$imgWidth;
$cuthumbHeight=$imgHeight;
switch($thumbType){
case1:
//固定寬度高度自增
$h=$thumbWidth/$imgWidth*$imgHeight;
break;
case2:
//固定高度寬度自增
$w=$thumbHeight/$imgHeight*$imgWidth;
break;
case3:
//固定寬度高度裁切
$cuthumbHeight=$imgWidth/$thumbWidth*$thumbHeight;
break;
case4:
//固定高度寬度裁切
$cuthumbWidth=$imgHeight/$thumbHeight*$thumbWidth;
break;
case5:
//縮放最大邊原圖不裁切
if(($imgWidth/$thumbWidth)>($imgHeight/$thumbHeight)){
$h=$thumbWidth/$imgWidth*$imgHeight;
}elseif(($imgWidth/$thumbWidth)<($imgHeight/$thumbHeight)){
$w=$thumbHeight/$imgHeight*$imgWidth;
}else{
$w=$thumbWidth;
$h=$thumbHeight;
}
break;
default:
//縮略圖尺寸不變,自動裁切圖片
if(($imgHeight/$thumbHeight)<($imgWidth/$thumbWidth)){
$cuthumbWidth=$imgHeight/$thumbHeight*$thumbWidth;
}elseif(($imgHeight/$thumbHeight)>($imgWidth/$thumbWidth)){
$cuthumbHeight=$imgWidth/$thumbWidth*$thumbHeight;
}
//}
}
$arr[0]=$w;
$arr[1]=$h;
$arr[2]=$cuthumbWidth;
$arr[3]=$cuthumbHeight;
return$arr;
}

/**
*圖片裁切處理
*@param$img原圖
*@paramstring$outFile另存文件名
*@paramstring$thumbWidth縮略圖寬度
*@paramstring$thumbHeight縮略圖高度
*@paramstring$thumbType裁切圖片的方式
*1固定寬度高度自增2固定高度寬度自增3固定寬度高度裁切
*4固定高度寬度裁切5縮放最大邊原圖不裁切6縮略圖尺寸不變,自動裁切最大邊
*@returnbool|string
*/
publicfunctionthumb($img,$outFile='',$thumbWidth='',$thumbHeight='',$thumbType=''){
if(!$this->check($img)){
returnfalse;
}
//基礎配置
$thumbType=$thumbType?$thumbType:$this->thumbType;
$thumbWidth=$thumbWidth?$thumbWidth:$this->thumbWidth;
$thumbHeight=$thumbHeight?$thumbHeight:$this->thumbHeight;
//獲得圖像信息
$imgInfo=getimagesize($img);
$imgWidth=$imgInfo[0];
$imgHeight=$imgInfo[1];
$imgType=image_type_to_extension($imgInfo[2]);
//獲得相關尺寸
$thumb_size=$this->thumbSize($imgWidth,$imgHeight,$thumbWidth,$thumbHeight,$thumbType);
//原始圖像資源
$func="imagecreatefrom".substr($imgType,1);
$resImg=$func($img);
//縮略圖的資源
if($imgType=='.gif'){
$res_thumb=imagecreate($thumb_size[0],$thumb_size[1]);
$color=imagecolorallocate($res_thumb,255,0,0);
}else{
$res_thumb=imagecreatetruecolor($thumb_size[0],$thumb_size[1]);
imagealphablending($res_thumb,false);//關閉混色
imagesavealpha($res_thumb,true);//儲存透明通道
}
//繪制縮略圖X
if(function_exists("imageresampled")){
imageresampled($res_thumb,$resImg,0,0,0,0,$thumb_size[0],$thumb_size[1],$thumb_size[2],$thumb_size[3]);
}else{
imageresized($res_thumb,$resImg,0,0,0,0,$thumb_size[0],$thumb_size[1],$thumb_size[2],$thumb_size[3]);
}
//處理透明色
if($imgType=='.gif'){
imagecolortransparent($res_thumb,$color);
}
//配置輸出文件名
$imgInfo=pathinfo($img);
$outFile=$outFile?$outFile:dirname($img).'/'.$this->thumbPreFix.$imgInfo['filename'].$this->thumbEndFix.".".$imgInfo['extension'];

Files::create(dirname($outFile));
$func="image".substr($imgType,1);
$func($res_thumb,$outFile);
if(isset($resImg))
imagedestroy($resImg);
if(isset($res_thumb))
imagedestroy($res_thumb);
return$outFile;
}

}

Ⅸ php中上傳文件的方法有多少種

一、傳統的php寫的上傳類。
寫一個php的上傳類,這個方法用到的知識全部是php的,而且技術的難點也不多。
<form method="post" action="upload.php" enctype="multipart/form-data">
<table border=0 cellspacing=0 cellpadding=0 align=center width="100%">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">//隱藏域。這里name必須設置成MAX_FILE_SIZE,其值就是上傳文件的最大長度,單位是B,這里我限製成2M
<input name="file" type="file" value="瀏覽" >
< input type="submit" value="上傳" name="B1">
</table>
</form>

服務端利用php的$_FILES['file']['name']來獲取文件後綴名,具體的代碼自己查找資料看看,這里就不多說了。
總結;這個方法可以用來上傳小於2M的文件或者是圖片,基本的功能可以實現。
二、利用uploadify插件
這個是利用jQuery的上傳插件,上傳可以帶進度條,容易配置。
總結:可以上傳一些大文件,和圖片,而且帶進度條,可以多文件上傳,在WEB中會經常用。
三、利用網路的webupload
WebUploader 是由 Bai FEX 團隊開發的一款以 HTML5 為主,FLASH 為輔的現代文件上傳組件。在現代的瀏覽器裡面能充分發揮 HTML5 的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的 FLASH 運行時,兼容 IE6+,iOS 6+, Android 4+。採用大文件分片並發上傳,極大的提高了文件上傳效率。
四、swfupload的插件

這是一個jquery的上傳插件,功能也非常強大,開發也比較容易,網上有很多的資料,可以自行查找。

熱點內容
為什麼工作站配置不好 發布:2025-01-21 02:53:38 瀏覽:445
我的世界伺服器怕被破壞怎麼辦 發布:2025-01-21 02:33:15 瀏覽:932
linux下交叉編譯實驗 發布:2025-01-21 02:19:00 瀏覽:434
java培訓班多少錢 發布:2025-01-21 02:17:23 瀏覽:335
帝豪gl哪個配置是電容屏 發布:2025-01-21 02:11:23 瀏覽:304
openwrt編譯零基礎 發布:2025-01-21 01:53:30 瀏覽:20
視頻聊天室源碼php 發布:2025-01-21 01:39:29 瀏覽:939
游戲腳本xp 發布:2025-01-21 01:25:48 瀏覽:210
cfa建模需要什麼電腦配置 發布:2025-01-21 01:16:41 瀏覽:97
配置獲取異常怎麼辦 發布:2025-01-21 01:16:29 瀏覽:642