Jquery Uploadify上傳帶進度條的簡單實例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Jquery Uploadify上傳帶進度條</title>
<link href="js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-v2.1.4/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路徑
'script': 'UploadHandler.ashx', //處理文件上傳的后臺腳本的路徑
'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',
'folder': 'UploadFile/<% = subpathName %>', //上傳文件夾的路徑
'queueID': 'fileQueue', //頁面中,你想要用來作為文件隊列的元素的id
'auto': false, //當文件被添加到隊列時,自動上傳
'multi': true, //設(shè)置為true將允許多文件上傳
'fileExt': '*.jpg;*.gif;*.png', //允許上傳的文件后綴
'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'sizeLimit': 102400, //上傳文件的大小限制,單位為字節(jié) 100k
'onCancel': function (event, ID, fileObj, data) { //當從上傳隊列每移除一個文件時觸發(fā)一次
alert('The upload of ' + fileObj.name + ' has been canceled!');
},
'onComplete': function (event, ID, fileObj, response, data) { //每完成一次文件上傳時觸發(fā)一次
alert('There are ' + data.fileCount + ' files remaining in the queue.');
},
'onAllComplete': function (event, data) { //當上傳隊列中的所有文件都完成上傳時觸發(fā)
alert(data.filesUploaded + ' files uploaded successfully!');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a>
</p>
</body>
</html>
<%@ WebHandler Language="C#" Class="UploadHandler" %>
using System;
using System.Web;
using System.IO;
public class UploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(Path.Combine(uploadPath, file.FileName));
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
- jQuery實現(xiàn)可拖動進度條實例代碼
- jquery 實現(xiàn)拖動文件上傳加載進度條功能
- jquery 簡單的進度條實現(xiàn)代碼
- 6款新穎的jQuery和CSS3進度條插件推薦
- 分享8款優(yōu)秀的 jQuery 加載動畫和進度條插件
- 基于HTML5 Ajax文件上傳進度條如何實現(xiàn)(jquery版本)
- Jquery進度條插件 Progress Bar小問題解決
- jQuery 頁面載入進度條實現(xiàn)代碼
- 用jQuery模擬頁面加載進度條的實現(xiàn)代碼
- jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法
- jQuery實現(xiàn)的手動拖動控制進度條效果示例【測試可用】
相關(guān)文章
jQuery實現(xiàn)隔行變色的方法分析(對比原生JS)
這篇文章主要介紹了jQuery實現(xiàn)隔行變色的方法,結(jié)合實例形式對比原生JS實現(xiàn)隔行變色的相關(guān)技巧,給出了2種jQuery實現(xiàn)隔行變色的方法,需要的朋友可以參考下2016-11-11easyui datagrid 表格中操作欄 按鈕圖標不顯示的解決方法
下面小編就為大家?guī)硪黄猠asyui datagrid 表格中操作欄 按鈕圖標不顯示的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07Jquery實現(xiàn)鼠標移上彈出提示框、移出消失思路及代碼
具體思路為:.首先要定位實現(xiàn)這種效果的元素 ,本次通過class;如果是動態(tài)顯示不同的提示內(nèi)容,需設(shè)置title;通過JQ給定位到元素加上 mouseover 和mouseout 事件2013-05-05jQuery 2.0.3 源碼分析之core(一)整體架構(gòu)
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core(一)整體架構(gòu),需要的朋友可以參考下2014-05-05