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 );
}
这里就可以处理您的返回信息了。具体的流程是这样的需要您自己去看看。