jQuery插件-上传文件

此插件主要提供带进度条的文件上传功能，它依赖于 Ajax Form 插件。

1). 在


                head

中导入css和js文件


<link href="css/uploadfile.min.css"rel="stylesheet"> 
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.uploadfile.min.js"></script>

2). 在


                body

中添加一个div标签来处理文件上传


<div id="fileuploader">upload</div>

3).当


                document

准备就绪，初始化插件 .

<script>
$(document).ready(function()
{
  $("#fileuploader").uploadFile({
  url:"YOUR_FILE_UPLOAD_URL",
  fileName:"myfile"
  });
});
</script>

就这么简单. jQuery上传插件的进度条已经准备好了.

文件上传

源码:

$("#singleupload1").uploadFile({
  url:"php/upload.php"
  });

结果:

上传

文件格式限制

代码:

$("#singleupload2").uploadFile({
url:"php/upload.php",
allowedTypes:"png,gif,jpg,jpeg",
fileName:"myfile"
});

结果:

上传

高级文件上传

代码:

var uploadObj = $("#advancedUpload").uploadFile({
url:"php/upload.php",
multiple:true,
autoSubmit:true,
fileName:"myfile",
formData: {"name":"Ravi","age":31},
maxFileSize:1024*100,
maxFileCount:1,
dynamicFormData: function()
{
  var data ={ location:"INDIA"}
  return data;
},
showStatusAfterSuccess:false,
dragDropStr: "<span><b>将文件拖拽至此处</b></span>",
abortStr:"上传被拒绝",
cancelStr:"取消",
doneStr:"完成",
multiDragErrorStr: "奥 & 拖拽的大多了.",
extErrorStr:"文件错误:",
sizeErrorStr:"文件太大了:",
uploadErrorStr:"上传失败！"

});
$("#startUpload").click(function()
{
  uploadObj.startUpload();
});

结果:

上传

Jquery删除文件配置

$("#deleteFileUpload").uploadFile({
 url: "upload.php",
 dragDrop: true,
 fileName: "myfile",
 returnType: "json",
 showDelete: true,
 deleteCallback: function (data, pd) {
     for (var i = 0; i < data.length; i++) {
         $.post("delete.php", {op: "delete",name: data[i]},
             function (resp,textStatus, jqXHR) {
                 //Show Message 
                 alert("File Deleted");
             });
     }
     pd.statusbar.hide(); //可选.
}
 });

结果:

文件上传 (删除)

Jquery多文件上传

代码:


$("#multipleupload").uploadFile({ 
url:"php/upload.php",
multiple:true,
fileName:"myfile" 
});

结果:

上传

Jquery文件上传事件

代码:

$("#eventsupload").uploadFile({
url:"php/upload.php",
multiple:true,
fileName:"myfile",
onSubmit:function(files)
{
  $("#eventsmessage").html($("#eventsmessage").html()+"<br/>Submitting:"+JSON.stringify(files));
},
onSuccess:function(files,data,xhr)
{
  $("#eventsmessage").html($("#eventsmessage").html()+"<br/>Success for: "+JSON.stringify(data));
  
},
afterUploadAll:function()
{
  $("#eventsmessage").html($("#eventsmessage").html()+"<br/>All files are uploaded");
  
},
onError: function(files,status,errMsg)
{
  $("#eventsmessage").html($("#eventsmessage").html()+"<br/>Error for: "+JSON.stringify(files));
}
});

结果:

上传

事件:

隐藏Cancel,Abort,Done按钮

代码:

$("#stylingupload1").uploadFile({
url:"php/upload.php",
multiple:true,
fileName:"myfile",
showStatusAfterSuccess:false,
showAbort:false,
showDone:false,
});

结果:

上传

改变上传按钮的样式

代码:

$("#stylingupload2").uploadFile({
url:"php/upload.php",
multiple:true,
fileName:"myfile",
showStatusAfterSuccess:false,
showAbort:false,
showDone:false,
uploadButtonClass:"ajax-file-upload-green"
});

结果:

上传

jQuery上传文件API

uploadFile
创建Ajax表单并上传文件至服务器


var uploadObj = $("#uploadDivId").uploadFile(options);.

startUpload
上传所有已选择的文件，当 autoSubmit 设置为 false时使用这个函数 .


uploadObj.startUpload();

选项

url
服务端URL地址，用来处理上传的文件

method
上传表单的方法类型 POST 或者 GET . 默认为 POST

enctype
上传表单的 enctype. 默认为 multipart/form-data .

formData
上传文件时会被一起发送的json对象. data: { key1: 'value1', key2: 'value2' }

returnType
期望响应返回的数据类型. 可以是以下中的一个: null , 'xml' , 'script' , or 'json' . returnType 选项明确了服务端如何处理响应. 支持以下几种数据格式:
xml : 如果returnType 等于 'xml' 那么服务端将响应的数据转换成xml格式，并且如果指定了'success' 回调函数，那么它将会传进responseXML数据值
json : 如果returnType 等于'json' ，那么服务端的响应将会被evaluted并且会被传递给 'success'回调函数（如果有指定的话）
script : 如果returnType 等于 'script'，那么服务端的响应将被evaluated在全局上下文中。

allowedTypes
用逗号隔开独立的文件后缀名. 默认为 "*" . 例如: "jpg,png,gif"

fileName
输入框中的文件名.默认为 file

multiple
如果设置为 true , 那么允许选择多文件. 默认为 false

maxFileSize
允许支持的最大文件大小（按字节计算）.

maxFileCount
允许上传的最大文件数量.

autoSubmit
如果设置为 true , 文件将自动上传. 否则你需要手动调用 .startUpload 函数. 默认为 true

showCancel
如果设置为 false , Cancel按钮被会被隐藏当 autoSubmit 为false时. 默认为 true

showAbort
如果设置为 false , Abort在上传文件时将会被隐藏. 默认为 true

showDone
如果设置为 false , Done按钮在上传完毕后将会被隐藏. 默认为 true

showDelete
如果设置为 true , Delete按钮当在上传完毕后将会出现. 默认为 false ,You need to implement deleteCallback() function.

showProgress
如果设置为 true , 将会显示进度. 默认为 false

showFileCounter
如果设置为 true , 将显示文件的计数. 默认为 true 文件计数可以通过 fileCounterStyle 改变. 默认为 ).

showStatusAfterSuccess
如果设置为 false , status框在上传完毕后将隐藏. 默认为 true

onSelect
当文件被选中或者被拖进来时将会调用此函数


onSelect:function(files) { 
files[0].name; 
return true; //允许文件上传. 
}

onSubmit
在文件上传之前会被调用.


onSubmit:function(files) { 
//files : 列出需要上传的文件 
//return false; 停止上传
}

onSuccess
当文件上传成功时将会被调用.


onSuccess:function(files,data,xhr) { 
//files: 列出文件 
//data: 服务端的响应 
//xhr : jquery的 xhr 对象 
}

afterUploadAll
当文件上床完毕后将会被调用.


afterUploadAll:function() { }

onError
文件上传失败后将会被调用.


onError: function(files,status,errMsg) { 
//files: 列出文件 
//status: 错误状态 
//errMsg: 错误信息
 }

deleteCallback
当用户点击Delete按钮之后将会被调用。

deleteCallback: function(data,pd)
{
  for(var i=0;i<data.length;i++)
  {
    $.post("delete.php",{op:"delete",name:data[i]},
      function(resp, textStatus, jqXHR)
      {
      //Show Message  
      alert("File Deleted");      
      });
   }    
  pd.statusbar.hide(); //可以选择隐藏或不隐藏.

}

uploadButtonClass
上传按钮样式. 默认为 ajax-file-upload

处理多文件上传的php代码

upload.php 代码:

<?php
$output_dir = "uploads/";
if(isset($_FILES["myfile"]))
{
  $ret = array();

  $error =$_FILES["myfile"]["error"];
  //需要处理这两种情况
  //如果浏览器不支持多文件的序列化，请使用FormData()
  if(!is_array($_FILES["myfile"]["name"])) //单个文件
  {
    $fileName = $_FILES["myfile"]["name"];
    move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
      $ret[]= $fileName;
  }
  else  //多个文件, file[]
  {
    $fileCount = count($_FILES["myfile"]["name"]);
    for($i=0; $i < $fileCount; $i++)
    {
      $fileName = $_FILES["myfile"]["name"][$i];
    move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
      $ret[]= $fileName;
    }
  
  }
    echo json_encode($ret);
 }
 ?>

delete.php 代码 code:

<?php
$output_dir = "uploads/";
if(isset($_POST["op"]) && $_POST["op"] == "delete" && isset($_POST['name']))
{
  $fileName =$_POST['name'];
  $filePath = $output_dir. $fileName;
  if (file_exists($filePath)) 
  {
        unlink($filePath);
    }
  echo "Deleted File ".$fileName."<br>";
}
?>

服务端配置-大文件上传

php.ini 配置


max_file_uploads = 2000 
upload_max_filesize = 40000M 
max_input_vars =10000 
post_max_size = 40000M

httpd.conf 配置


php_value suhosin.post.max_vars 10000 
php_value suhosin.request.max_vars 10000 
php_value suhosin.get.max_array_depth 2000 
php_value suhosin.get.max_vars 10000 
php_value suhosin.upload.max_uploads 2000