Uploadify多文件上傳插件.NET使用案例+PHP使用案例
ploadify是一個很是好用的多文件上傳插件javascript
插件下載：http://www.uploadify.comphp
下載後須要用到的文件：css
接下來就是直接添加代碼：html
Default.aspx代碼java
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>附件上傳</title>
<script src="Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.uploadify.min.js" type="text/javascript"></script>
<link href="Scripts/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#file_upload").uploadify({
"auto": false,//接受true or false兩個值，當爲true時選擇文件後會自動上傳；爲false時只會把選擇的文件增長進隊列但不會上傳，這時只能使用upload的方法觸發上傳。不設置auto時默認爲true
"cancelImg": "Scripts/uploadify-cancel",//設置文書上傳成功後的擦出圖標
"buttonClass": "btn", //設置上傳按鈕的class
"buttonCursor": 'hand', //設置鼠標移到按鈕上的開狀，接受兩個值'hand'和'arrow'(手形和箭頭)
//"buttonImage": 'img/browse-btn.png',//設置圖片按鈕的路徑（當你的按鈕是一張圖片時）。若是使用默認的樣式，你還能夠建立一個鼠標懸停狀態，但要把兩種狀態的圖片放在一塊兒，而且默認的放上面，懸停狀態的放在下面
"swf": "Scripts/uploadify.swf",//設置flash插件的路徑：必要文件
"fileSizeLimit":"1GB",//設置上傳文件的大小
"uploader": "Uploadify.ashx?action=upload",//文件上傳到服務器後對數據的處理
"fileTypeExts": '*.gif; *.jpg; *.png; *.jpeg; *.psd; *.wps; *.doc; *.dot; *.docx;*.pdf; *.xls; *.xlsx; *.xlt; *.xlsm; *.dif; *.txt; *.ppt; *.pot; *.dpt; *.pps',//設置上傳的文件的類型rar或者zip會致使彈窗很慢，慎用
"removeCompleted": true,//上傳成功後，進度條消失
"buttonText": '上傳附件',
//設置按鈕文字。值會被看成html渲染，因此也能夠包含html標籤
// "checkExisting": '/uploadify/check-exists.php',
// //接受一個文件路徑。此文件檢查正要上傳的文件名是否已經存在目標目錄中。存在時返回1，不存在時返回0(應該主要是做爲後臺的判斷吧)，默認爲false
// "debug:": false,
// //開啓或關閉debug模式
// "fileObjName": 'filedata',
// //設置在後臺腳本使用的文件名。舉個例子，在php中，若是這個選項設置爲'the_files',你可使用$_FILES['the_files']存取這個已經上傳的文件。
// "fileSizeLimit": '100MB',
// //設置上傳文件的容量最大值。這個值能夠是一個數字或者字符串。若是是字符串，接受一個單位（B,KB,MB,GB）。若是是數字則默認單位爲KB。設置爲0時表示不限制
// "fileTypeExts": '*.*',
// //設置容許上傳的文件擴展名（也就是文件類型）。但手動鍵入文件名能夠繞過這種級別的安全檢查，因此你應該始終在服務端中檢查文件類型。輸入多個擴展名時用分號隔開('*.jpg;*.png;*.gif')
// "fileTypeDesc": 'All Files',
// //可選文件的描述。這個值出如今文件瀏覽窗口中的文件類型下拉選項中。（chrome下不支持，會顯示爲'自定義文件',ie and firefox下可顯示描述）
// "formData": {
// timestamp: '<?php echo $timestamp;?>',
// token: '<?php echo md5('unique_salt' . $timestamp);?>'
// },
// //經過get或post上傳文件時，此對象提供額外的數據。若是想動態設置這些值，必須在onUploadStartg事件中使用settings的方法設置。在後臺腳本中使用 $_GET or $_POST arrays (PHP)存取這些值。看官網參考寫法：http://www.uploadify.com/documentation/uploadify/formdata/
"height": 30,
// //設置按鈕的高度(單位px)，默認爲30.(不要在值裏寫上單位，而且要求一個整數，width也同樣)
"width": 120,
// //設置按鈕寬度(單位px)，默認120
// "itemTemplate": false,
// //模板對象。給增長到上傳隊列中的每一項指定特殊的html模板。模板格式請看官網http://www.uploadify.com/documentation/uploadify/itemtemplate/
// "method": 'post',
// //提交上傳文件的方法，接受post或get兩個值，默認爲post
// "multi": false,
// //設置是否容許一次選擇多個文件，true爲容許，false不容許
// "overrideEvents": [],
// //重寫事件，接受事件名稱的數組做爲參數。所設置的事件將能夠被用戶重寫覆蓋
// "preventCaching": true,
// //是否緩存swf文件。默認爲true，會給swf的url地址設置一個隨機數，這樣它就不會被緩存。(有些瀏覽器緩存了swf文件就會觸發不了裏面的事件--by rainweb)
// "progressData": 'percentage',
// //設置文件上傳時顯示數據，有‘percentage’ or ‘speed’兩個參數(百分比和速度)
// "queueID": false,
// //設置上傳隊列DOM元素的ID，上傳的項目會增長進這個ID的DOM中。設置爲false時則會自動生成隊列DOM和ID。默認爲false
"queueSizeLimit": 10,
// //設置每一次上傳隊列中的文件數量。注意並非限制總的上傳文件數量（那是uploadLimit）.若是增長進隊列中的文件數量超出這個值，將會觸發onSelectError事件。默認值爲999
// "removeCompleted": true,
// //是否移除掉隊列中已經完成上傳的文件。false爲不移除
"removeTimeout": 1,
// //設置上傳完成後刪除掉文件的延遲時間，默認爲3秒。若是removeCompleted爲false的話，就沒意義了
// "requeueErrors": false,
// //設置上傳過程當中由於出錯致使上傳失敗的文件是否從新加入隊列中上傳
// "successTimeout": 30,
//設置文件上傳後等待服務器響應的秒數，超出這個時間，將會被認爲上傳成功，默認爲30秒
"onUploadSuccess": function (file, data, response) {//文件上傳成功的所執行的方法
// alert('文件 ' + file.name + ' 已經上傳成功，並返回 ' + response + ' 服務器狀態 ' + data);
}
});
});
</script>
<style type="text/css">
.btn{
border:none;
border-radius:0%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" id="file_upload" name="file_upload" />
</div>
<div>
<a href="javascript:$('#file_upload').uploadify('upload');">上傳第一個</a>
<a href="javascript:$('#file_upload').uploadify('upload','*');">上傳隊列</a>
<a href="javascript:$('#file_upload').uploadify('cancel');">取消第一個</a>
<a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消隊列</a>
</div>
</form>
</body>
</html>
Uploadify.ashx代碼jquery
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace Uploadify
{
/// <summary>
/// Uploadify 的摘要說明
/// </summary>
public class Uploadify : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
string action = context.Request["action"];
switch (action)
{
case "upload":
//上傳附件
upload(context);
break;
}
context.Response.End();
}
/// <summary>
/// 上傳附件
/// </summary>
/// <param name="context"></param>
private void upload(HttpContext context)
{
HttpPostedFile postedFile = context.Request.Files["Filedata"];
if (postedFile != null)
{
string fileName, fileExtension;
int fileSize;
fileName = postedFile.FileName;
fileSize = postedFile.ContentLength;
if (fileName != "")
{
fileExtension = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf('.'));
string path = context.Server.MapPath("/") + "\\Uploadify\\";//設置文件的路徑
// string fileUrl = path + DateTime.Now.ToString("yyyyMMddHHmmss") + fileExtension;//保存文件路徑
// if (!Directory.Exists(path))
// {
// Directory.CreateDirectory(path);
// }
string fileUrl=path+ fileName;
postedFile.SaveAs(fileUrl);//先保存源文件
context.Response.Write("上傳成功！");
}
else
{
context.Response.Write("上傳失敗！");
}
}
else
{
context.Response.Write("上傳失敗！");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
項目文件結構：web
實現後的效果圖ajax
點擊上傳附件選擇文件打開後chrome
點擊上傳第一個列隊json
文件上傳成功
PHP案例
服務器文件夾結構
demo.html代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Uploadify--demo</title>
<link rel="stylesheet" type="text/css" href="uploadify.css"/>
<script src="jquery.min.js"></script>
<script src="jquery.uploadify.v2.1.4.min.js"></script>
<script src="swfobject.js"></script>
<script src="json2.js"></script>
<script>
$(function(){
//每次上傳文件過程的各類信息的存儲容器，存儲生存週期是從選擇文件到下次選擇文件
var responseDataObjContainer=[],queueIdObjContainer=[],fileObjContainer=[],dataObjContainer=[];
$('#file_upload').uploadify({
'uploader' : 'uploadify.swf',
'script' : 'upload.php?kind=type_2',
'fileDataName':'upfiledata',//就是<input type="file" name="upfiledata" />
'cancelImg' : 'cancel.png',//取消按鈕的小圖片
'wmode' : 'transparent',//flash透明
'hideButton': true,//隱藏按鈕 必須設置flash透明，
//隱藏的目的是本身能夠弄個圖片按鈕作背景，防止中文亂碼 若是直接設置buttonText爲中文會出現亂碼
//設置背景的CSS #file_uploadUploader {background: url('bag.gif') no-repeat;}
//#file_uploadUploader就是動態生成的flash的id
'width' :60,//flash寬 因爲設置的背景圖片的寬是60 高是22 因此這裏和下面設置60 22
'height' :22,//flash高
'queueID' :'myinfo',//上傳提示信息的層的id，默認是 file_uploadQueue
//若是不想顯示提示把提示層的display設爲none
'queueSizeLimit':10,//當設置容許同時選擇多個上傳時，設置最大的文件數
'sizeLimit':1024*1024*1,//單位bit
'displayData': 'percentage',//顯示進度提示爲百分比 還能夠是速度 speed
'multi' :true,//是否容許同時選擇多個文件上傳
'removeCompleted':false,//上傳完成是否隱藏提示信息
'fileExt' : '*.*',//容許的擴展名默認*.*//*.jpg;*.gif;*.png
'fileDesc' : '圖片文件(*.jpg;*.gif;*.png)',//文件選擇對話框擴展名下面的提示信息
'onComplete':function(event,queueId,fileObj,response,data){//每一個文件上傳完成時執行的函數 response是服務器返回的數據
var _msg=eval("("+response+")");
queueIdObjContainer.push(queueId);
fileObjContainer.push(fileObj);
responseDataObjContainer.push(_msg);
dataObjContainer.push(data);
//hint("#hint",info);
},
'onAllComplete':function(event,data){//全部上傳完成執行的函數 response是服務器返回的數據
var info='';
for(var i=0;i<responseDataObjContainer.length;i++){//當一次上傳操做完成時，處理各類數據
info+=responseDataObjContainer[i].msg+JSON.stringify(dataObjContainer[i])+'<br/>';
}
hint("#hint",info);
},
'onError':function(event,queueId,fileObj,errorObj){//上傳發生錯誤執行的函數
hint("#hint",errorObj.type+":"+errorObj.info);
},
'onSelectOnce' : function(event,data) {//每選擇一次文件就觸發該函數
responseDataObjContainer=[];
queueIdObjContainer=[];
fileObjContainer=[];
dataObjContainer=[];
},
'auto' : true
});
});//end ready
function hint(slector,str){$(slector).html(str);}
</script>
</head>
<body>
<input id="file_upload" name="file_upload" type="file" />
<!--<a href="#" onclick="$('#file_upload').uploadifyUpload();">clickStartUpload</a><br/>-->
<span id="hint"></span>
<div id="myinfo"></div>
</body>
</html>
upload.php代碼
<?php ob_start();
/*
使用說明：
一、使用前請先在下面配置
二、經過?kind=type調用，type是你本身在switch中自定義的case類型
三、處理完文件後返回json數據
四、成功返回形如：
{"code":200,"name":"原始文件名","save_name"=>"服務器保存文件名","path"=>"保存路徑","msg":"上傳文件[文件名]成功！"}
五、失敗返回形如 以下三種json數據：
{"code":403,"msg":"文件大小超出限制！[最大*KB]"}
{"code":403,"msg":"該文件類型不容許上傳！只容許：擴展名"}
{"code":500,"msg":"上傳失敗！錯誤代碼:"數字"}
小提示：
因爲ajax不能上傳文件，並且本程序返回數據是json格式，因此建議使用jquery.form.js插件提交表單，
該插件動態建立iframe提交表單，並支持返回json數據，詳細使用請看官方的上傳文件示例。
另外，若是使用jquery.form.js
要注意修改下面的這句代碼echo $buffer;爲echo '<textarea>'.$buffer.'</textarea>';
這是由於jquery.form.js插件要求返回的json數據必須是在<textarea>標記之間。
*/
//##########################配置開始#########################
$isRnd=true;//true是使用隨機文件名保存文件，false使用原始文件名或者用戶本身指定的文件名保存
$formFileFieldName="upfiledata";//表單中文件標籤的name屬性值
switch(@$_GET['kind']){
//請根據case配置不一樣的上傳信息
case "type_1":
$upfilePath = "./upfiles/";//上傳文件保存路徑,文件夾不存在時會嘗試新建,最後要有 /
$Exts=array(".rar",".zip");//容許上傳文件後綴，留空容許全部
$file_size = 2048; //上傳文件大小單位KB
break;
case "type_2":
$upfilePath = "./upfiles/";
$Exts=array(".jpg",".png",".bmp",".gif",".zip");
$file_size = 5000;
break;
default:
exit();
}
//################################配置結束#############################
//如下代碼不要改動
$successEcho=json_encode(array("code"=>200,"name"=>"[name]","save_name"=>"[save_name]","path"=>"[path]","msg"=>"上傳文件[name]成功！"));
@$file=$_FILES[$formFileFieldName];
$fileobj = new upload($file);
$fileobj->isRnd=$isRnd;//設置是否使用隨機文件名
$fileobj->file_size=$file_size;//設置文件大小
$fileobj->upfilePath = $upfilePath;//設置上傳路徑
$fileobj->successEcho=$successEcho;//設置上傳成功返回的json數據
$fileobj->setExt($Exts);//設置容許的文件後綴
$fileobj->saveFile();//處理文件
$name=$fileobj->filename;
$saveName=$fileobj->saveName;
$path=$fileobj->upfilePath;
$buffer=ob_get_contents();ob_clean();
$buffer=str_replace("[name]",$name,$buffer);
$buffer=str_replace("[save_name]",$saveName,$buffer);
$buffer=str_replace("[path]",$path,$buffer);
echo $buffer;
?>
<?php
/**
* 本文件是ＰＨＰ文件上傳類，做學習交流之用
* 任何人和組織能夠自由複製和修改
* 可是請保留該版權信息
* 做者：狂奔的蝸牛 QQ：672308444
*/
class upload
{
public $file; //經過$_FILES["upload"]得到的文件對象
public $file_size = 1024; //上傳最大值，單位KB，默認是：1024KB（1M）最大不能超過php.ini中的限制（默認是2M）
public $upfilePath = "upfiles/"; //上傳文件路徑，若是文件夾不存在自動建立
private $ext = array(".gif",".jpg",".png",".bmp",".zip"); //文件類型限制，默認是：".gif",".jpg",".png",".bmp"
public $saveName,$filename,$isRnd=true;
public function __construct($files)
{ @session_start();
$this->file = $files;
}
function saveFile($saveName = null)
{
$upPath = $this->upfilePath;
$file = $this->file;
$this->filename=$file["name"];
if (!$this->isRnd) {
if(!$saveName){$saveName=$this->filename;}
$this->saveName=$saveName;
$path = $upPath.$saveName;
} elseif($this->isRnd){
$saveName=$this->getRandomName();
$path = $upPath.$saveName;
$this->saveName=$saveName;
}
if (!file_exists($upPath)) {
mkdir($upPath);
}
if ($this->check_file_type($file)) {
echo '{"code":403,"msg":"該文件類型不容許上傳！只容許：'.str_replace('"',"",json_encode($this->ext)).'"}';
return;
}
if ($this->check_file_size($file)) {
echo '{"code":403,"msg":"文件大小超出限制！[最大'.$this->file_size.'KB]"}';
return;
}
@move_uploaded_file($file["tmp_name"], iconv("UTF-8", "gbk", $path));
if($file["error"]===0){
echo $this->successEcho;
}else{
echo '{"code":500,"msg":"上傳失敗！錯誤代碼:'.$file["error"].'"}';
}
}
function setExt(array $ext)
{
$this->ext = $ext;
}
function getExt(array $ext)
{
return $this->ext;
}
function getRandomName()
{
@$pos = strrpos($this->file["name"], ".");
@$fileExt = strtolower(substr($this->file["name"], $pos));
ini_set('date.timezone', 'Asia/Shanghai');
$t = getdate();
@$year = $t[year];
@$mon = $t[mon] > 10 ? $t[mon] : "0".$t[mon];
@$day = $t[day] > 10 ? $t[day] : "0".$t[day];
@$hours = $t[hours] > 10 ? $t[hours] : "0".$t[hours];
@$minutes = $t[minutes] > 10 ? $t[minutes] : "0".$t[minutes];
@$seconds = $t[seconds] > 10 ? $t[seconds] : "0".$t[seconds];
return $year.$mon.$day.$hours.$minutes.$seconds.rand(1000, 9999).$fileExt;
}
function check_file_type()
{
@$file = $this->file;
@$ext = $this->ext;
@$pos = strrpos($file["name"], ".");
@$fileExt = strtolower(substr($file["name"], $pos));
if (count($ext) == 0)
return false;
for ($i = 0; $i < count($ext); $i++) {
if (strcmp($ext[$i], $fileExt) == 0) {
return false;
}
;
}
return true;
}
function check_file_size()
{
$file = $this->file;
if (@$file["size"] / 1024 <= $this->file_size)
return false;
return true;
}
}//end class
?>
實現效果
相關文章
- 1. 使用uploadify上傳文件
- 2. jquery使用uploadify插件實現多文件的上傳（java版）
- 3. 關於多文件上傳插件uploadify使用總結
- 4. java版-JQuery上傳插件Uploadify使用實例
- 5. jQuery上傳文件控件Uploadify使用
- 6. JQuery上傳插件Uploadify使用詳解
- 7. jQuery上傳插件Uploadify使用幫助
- 8. jQuery上傳插件Uploadify使用詳解
- 9. 文件上傳案例
- 10. 案例34-文件上傳
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • ASP 引用文件 - ASP 教程
- • Composer 安裝與使用
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
