phpjquery上傳文件

1. 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的上傳插件，功能也非常強大，開發也比較容易，網上有很多的資料，可以自行查找。

2. jQuery fileupload 多文件上傳

//js
$(function(){
			//文件上傳地址
			//varurl='http://localhost/index.php/upload/do_upload';
			varurl='http://localhost/index.php/uploadwe';
			//初始化，主要是設置上傳參數，以及事件處理方法(回調函數)
			$('#fileupload').fileupload({
				autoUpload:true,//是否自動上傳
				//url:url,//上傳地址
				dataType:'json',
				done:function(e,data){//設置文件上傳完畢事件的回調函數
					//$.each(data.result.files,function(index,file){
					$("#myimg").attr({src:data.result.imgurl});
					$("#myimg").css({width:"290px",height:"218px"});
					//alert(data.result);
				},
				progressall:function(e,data){//設置上傳進度事件的回調函數
					varprogress=parseInt(data.loaded/data.total*5,10);
					$('#progress.bar').css(
						'width',
						progress+'%'
					);
				}
			});
		});
//上傳至服務後，伺服器返回json數據--上傳圖片的地址。
//html
<labelfor="text">上傳圖片</label>
<inputid="fileupload"type="file"name="files"data-url="<spanstyle="color:#ff6666;">jquery_save_img</span>"multiple>
//data-url為上傳至伺服器端的處理介面/地址，可替換js中的url
//伺服器端
functionjquery_save_img()
{
$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/pjpeg','image/jpeg');
$max_size='500000000000';//最大文件限制（單位：byte）
$upfile='./uploads';//圖片目錄路徑
$file=$_FILES['files'];

/*
echo'filename:'.$file['tmp_name'].';<br/>';
echo'size:'.$file['size'].';<br/>';
echo'type:'.$file['type'].';<br/>';
echo'name:'.$file['name'].';<br/>';
*/

if($_SERVER['REQUEST_METHOD']=='POST'){//判斷提交方式是否為POST
if(!is_uploaded_file($file['tmp_name'])){//判斷上傳文件是否存在
echo"<fontcolor='#FF0000'>文件不存在！</font>";
exit;
}

if($file['size']>$max_size){//判斷文件大小是否大於500000位元組
echo"<fontcolor='#FF0000'>上傳文件太大！</font>";
exit;
}
if(!in_array($file['type'],$arrType)){//判斷圖片文件的格式
echo"<fontcolor='#FF0000'>上傳文件格式不對！</font>xxx:".$file['type'];
exit;
}
if(!file_exists($upfile)){//判斷存放文件目錄是否存在
mkdir($upfile,0777,true);
}
$imageSize=getimagesize($file['tmp_name']);
$img=$imageSize[0].'*'.$imageSize[1];
$fname=$file['name'];
$ftype=explode('.',$fname);
$picName=$upfile."/cloudy".$fname;

if(file_exists($picName)){
//echo"<fontcolor='#FF0000'>同文件名已存在！</font>";
//exit;
}
if(!move_uploaded_file($file['tmp_name'],$picName)){
echo"<fontcolor='#FF0000'>移動文件出錯！</font>";
exit;
}
else{
/*
echo"<fontcolor='#FF0000'>圖片文件上傳成功！</font><br/>";
echo"<fontcolor='#0000FF'>圖片大小：$img</font><br/>";
echo"圖片預覽：<br><divstyle='border:#F001pxsolid;width:200px;height:200px'>
<imgsrc="".$picName.""width=200pxheight=200px>".$fname."</div>";
*/
echo'{"imgurl":"http://localhost/uploads/cloudy'.$fname.'"}';
}
}

}

3. jquery file upload怎麼使用

使用方法：
1. 需要載入的js文件：
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
2. html代碼：
?

1

<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

3. js代碼：
?

12345678910

$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text(file.name).appendTo(document.body);});}});});

3.1 顯示上傳進度條：
?

123456789

$('#fileupload').fileupload({progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .bar').css('width',progress + '%');}});

3.2 需要一個<div>容器用來顯示進：
?

123

<div id="progress"><div class="bar" style="width: 0%;"></div></div>

4. API
4.1 Initialization：
在上傳按鈕上調用fileupload()方法;
示例：
$('#fileupload').fileupload();

4.2 Options :
1: url：請求發送的目標url
Type: string
Example: '/path/to/upload/handler.json'
2.Type: 文件上傳HTTP請求方式，可以選擇「POST」，「PUT」或者"PATCH",
默認"POST"
Type: string
Example: 'PUT'
3. dataType:希望從伺服器返回的數據類型，默認"json"
Type: string
Example: 'json'
4. autoUpload:默認情況下，只要用戶點擊了開始按鈕被添加至組件的文件會立即上傳。將autoUpload值設為true可以自動上傳。
Type: boolean
Default: true
5. acceptFileTypes：允許上傳的的文件類型
Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i
6. maxFileSize: 最大上傳文件大小
Example: 999000 (999KB) //單位：B
7. minFileSize:最小上傳文件大小
Example: 100000 (100KB) //單位：B
8.previewMaxWidth : 圖片預覽區域最大寬度
Example: 100 //單位：px
4.3 Callback Options:
使用方法一：函數屬性
實例：

?

123456789101112

$('#fileupload').fileupload({drop: function (e, data) {$.each(data.files, function (index, file) {alert('Dropped file: ' + file.name);});},change: function (e, data) {$.each(data.files, function (index, file) {alert('Selected file: ' + file.name);});}});

使用方法二：綁定事件監聽函數
實例：
?

123

$('#fileupload').bind('fileuploaddrop', function (e, data) {/* ... */}).bind('fileuploadchange', function (e, data) {/* ... */});

每個事件名稱都添加前綴：」fileupload」;
注意推薦使用第二種方法。
常用的回調函數：
1. add: 當文件被添加到上傳組件時被觸發
?

1

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});

或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});
2. processalways: 當一個單獨的文件處理隊列結束（完成或失敗時）觸發
3. progressall: 全局上傳處理事件的回調函數
Example:
?

1234567

$('#fileupload').on('fileuploadprogressall', function (e, data) { //進度條顯示var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width',progress + '%');});

4. fail : 上傳請求失敗時觸發的回調函數，如果伺服器返回一個帶有error屬性的json響應這個函數將不會被觸發。
5. done : 上傳請求成功時觸發的回調函數，如果伺服器返回一個帶有error屬性的json響應這個函數也會被觸發。
6. always : 上傳請求結束時（成功，錯誤或者中止）都會被觸發。

4. jquery 多個 上傳文件教程

jquery 實現多個上傳文件教程：

首先創建解決方案,添加jquery的js和一些資源文件(如圖片和進度條顯示等):

jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css

1、頁面的基本代碼如下

這里用的是aspx頁面(html也是也可的)

頁面中引入的js和js函數如下：

<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.min.js"type="text/javascript"></script>
<scriptsrc="js/swfobject.js"type="text/javascript"></script>
<linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/>

</script>

js函數：

<scripttype="text/javascript">
$(document).ready(function(){

$("#uploadify").uploadify({
'uploader':'image/uploadify.swf',//uploadify.swf文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊後淡出打開文件對話框
'script':'Handler1.ashx',//script：後台處理程序的相對路徑
'cancelImg':'image/cancel.png',
'buttenText':'請選擇文件',//瀏覽按鈕的文本，默認值：BROWSE。
'sizeLimit':999999999,//文件大小顯示
'floder':'Uploader',//上傳文件存放的目錄
'queueID':'fileQueue',//文件隊列的ID，該ID與存放文件隊列的div的ID一致
'queueSizeLimit':120,//上傳文件個數限制
'progressData':'speed',//上傳速度顯示
'auto':false,//是否自動上傳
'multi':true,//是否多文件上傳
//'onSelect':function(e,queueId,fileObj){
//alert("唯一標識:"+queueId+"
"+
//"文件名："+fileObj.name+"
"+
//"文件大小："+fileObj.size+"
"+
//"創建時間："+fileObj.creationDate+"
"+
//"最後修改時間："+fileObj.modificationDate+"
"+
//"文件類型："+fileObj.type);

//}
'onQueueComplete':function(queueData){
alert("文件上傳成功！");
return;
}

});
});

頁面中的控制項代碼：

<body>
<formid="form1"runat="server">
<divid="fileQueue">
</div>
<div>
<p>
<inputtype="file"name="uploadify"id="uploadify"/>
<inputid="Button1"type="button"value="上傳"onclick="javascript:$('#uploadify').uploadifyUpload()"/>
<inputid="Button2"type="button"value="取消"onclick="javascript:$('#uploadify').uploadifyClearQueue()"/>
</p>
</div>
</form>
</body>

函數主要參數：

$(document).ready(function(){
$('#fileInput1').fileUpload({
'uploader':'uploader.swf',//不多講了
'script':'/AjaxByJQuery/file.do',//處理Action
'cancelImg':'cancel.png',
'folder':'',//服務端默認保存路徑
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向後台傳遞參數,methed,arg1為參數名,uploadFile,value1為對應的參數值,服務端通過request["arg1"]
'buttonText':'UpLoadFile',//按鈕顯示文字,不支持中文,解決方案見下
//'buttonImg':'圖片路徑',//通過設置背景圖片解決中文問題,就是把背景圖做成按鈕的樣子
'multi':'true',//多文件上傳開關
'fileExt':'*.xls;*.csv',//文件過濾器
'fileDesc':'.xls',//文件過濾器詳解見文檔
'onComplete':function(event,queueID,file,serverData,data){
//serverData為伺服器端返回的字元串值
alert(serverData);
}
});
});

後台一般處理文件：

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.IO;
usingSystem.Net;
usingSystem.Web;
usingSystem.Web.Services;
namespacefupload
{
///<summary>
///Handler1的摘要說明
///</summary>
publicclassHandler1:IHttpHandler
{

publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";

HttpPostedFilefile=context.Request.Files["Filedata"];//對客戶端文件的訪問

stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\";//伺服器端文件保存路徑

if(file!=null)
{
if(!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//創建服務端文件夾
}

file.SaveAs(uploadPath+file.FileName);//保存文件
context.Response.Write("上傳成功");
}

else
{
context.Response.Write("0");
}

}

publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}

以上方式基本可以實現多文件的上傳，大文件大小是在控制在10M以下/。

5. 用jquery實現ajax 上傳圖片提交到PHP

$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
先看一個簡單的ajax提交數據功能
some.php就是你提交到後台進行操作的php data就是參數根據自己的需要而定餓。
當數據與php提交有效或者說後台成功返回時 success就是成功返回到前台的方法操作msg就是後台操作前台提交的數據所返回的 xml或者json或者字元串的信息 根據您自己所定義的信息進行數據操作。

您的是上傳功能。那麼您所提供的數據有圖片地址。和一個上傳功能的php函數。這個函數當您提交action的php。當這個php被執行時正確的返回為1時為上傳成功、0為上傳失敗（或者將返回失敗的信息返回給前台）、success: function(msg){
alert( "Data Saved: " + msg );
}
這里就可以處理您的返回信息了。具體的流程是這樣的需要您自己去看看。