下载 现在有两个版本了,我此次使用的依然是Flash版本的,虽然现在绝大部分浏览器都兼容HTMKL5,目前位置,除了做手机项目外,一般我们项目中不允许使用HTML5标签。
属性介绍(Options)
auto:是否自动上传,默认值true。如果设置为false,上传文件将会被放入到一个队列中,需要调用upload方法才会将队列中的文件上传到服务器,具体参见upload方法介绍。
$(function () {
$("#upload").uploadify({
auto: false,
swf: '/uploadify/uploadify.swf',
uploader: '/ashx/upload.ashx'
});
});
效果图:
注意:不调用upload方法,将会永久在队列中。不会自动提交到服务器。
buttonClass:按钮的样式,默认值(Empty String)。想要设置样式还是很麻烦的,首先你要覆盖掉原有的样式,原有样式在uploadify.css(你也可以对次css文件进行精简),这个属性一般不怎么用,项目中让美工切button图片,直接赋值给buttonImage。这里只给出一个使用的例子:
.some{
background-color:Red;
background-image:none;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="JQ_uploadify.Demo" %> <!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>
<link href="/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<link href="/css/css.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/uploadify/jquery.uploadify.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#upload").uploadify({
'buttonText': '神马',
'buttonClass': 'some',
'buttonImage': null,
'swf': '/uploadify/uploadify.swf',
'uploader': '/ashx/upload.ashx'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" name="upload" value="上传" id="upload" />
</div>
</form>
</body>
</html>
buttonClass
效果:
buttonCursor:鼠标悬停在按钮上的样式,默认值hand(手型),可设置为arrow(箭头)。
buttonImage:按钮的图片路径 ,默认值null。这里需要强调一下,项目中不要把uploadify.css原封不动的引用,因为里面有默认样式。
最外层的div自带uploadify样式,可能会导致你新加的样式无效。
buttonText:按钮的文本,默认值'SELECT FILES'。
checkExisting:检测文件是否已经存在,提示是否执行覆盖操作。默认值false。
$(function () {
$("#upload").uploadify({
'buttonText': '神马',
'checkExisting': '/ashx/checkExisting.ashx',
'swf': '/uploadify/uploadify.swf',
'uploader': '/ashx/upload.ashx',
onUploadError: function (data) { alert(data); }
});
});
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace JQ_uploadify.ashx
{
/// <summary>
/// checkExisting 的摘要说明
/// </summary>
public class checkExisting : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("");
} public bool IsReusable
{
get
{
return false;
}
}
}
}
后台暂时测试文件,以后完善
debug:调试必备,可以看到上传的详细信息。
---SWFUpload Instance Info---
Version: 2.2. --
Movie Name: SWFUpload_0
Settings:
upload_url: /uploadify/uploadify.php
flash_url: /uploadify/uploadify.swf?preventswfcaching=
use_query_string: false
requeue_on_error: false
http_success:
assume_success_timeout:
file_post_name: Filedata
post_params: [object Object]
file_types: *.*
file_types_description: All Files
file_size_limit:
file_upload_limit:
file_queue_limit:
debug: true
prevent_swf_caching: true
button_placeholder_id: file_upload
button_placeholder: Not Set
button_image_url: /documentation/uploadify/debug/
button_width:
button_height:
button_text:
button_text_style: color: #; font-size: 16pt;
button_text_top_padding:
button_text_left_padding:
button_action: -
button_disabled: false
custom_settings: [object Object]
Event Handlers:
swfupload_loaded_handler assigned: false
file_dialog_start_handler assigned: true
file_queued_handler assigned: true
file_queue_error_handler assigned: true
upload_start_handler assigned: true
upload_progress_handler assigned: true
upload_error_handler assigned: true
upload_success_handler assigned: true
upload_complete_handler assigned: true
debug_handler assigned: true SWF DEBUG: SWFUpload Init Complete
SWF DEBUG:
SWF DEBUG: ----- SWF DEBUG OUTPUT ----
SWF DEBUG: Build Number: SWFUPLOAD 2.2.
SWF DEBUG: movieName: SWFUpload_0
SWF DEBUG: Upload URL: /uploadify/uploadify.php
SWF DEBUG: File Types String: *.*
SWF DEBUG: Parsed File Types:
SWF DEBUG: HTTP Success:
SWF DEBUG: File Types Description: All Files (*.*)
SWF DEBUG: File Size Limit: bytes
SWF DEBUG: File Upload Limit:
SWF DEBUG: File Queue Limit:
SWF DEBUG: Post Params:
SWF DEBUG: ----- END SWF DEBUG OUTPUT ----
SWF DEBUG:
SWF DEBUG: Event: fileDialogStart : Browsing files. Multi Select. Allowed file types: *.*
SWF DEBUG: Select Handler: Received the files selected from the dialog. Processing the file list...
SWF DEBUG: Event: fileQueued : File ID: SWFUpload_0_0
SWF DEBUG: Event: fileDialogComplete : Finished processing selected files. Files selected: . Files Queued:
SWF DEBUG: StartUpload: First file in queue
SWF DEBUG: Event: uploadStart : File ID: SWFUpload_0_0
SWF DEBUG: ReturnUploadStart(): File accepted by startUpload event and readied for upload. Starting upload to /uploadify/uploadify.php for File ID: SWFUpload_0_0
SWF DEBUG: Event: uploadProgress (OPEN): File ID: SWFUpload_0_0
SWF DEBUG: Event: uploadProgress: File ID: SWFUpload_0_0. Bytes: . Total:
SWF DEBUG: Event: uploadProgress: File ID: SWFUpload_0_0. Bytes: . Total:
SWF DEBUG: Event: uploadSuccess: File ID: SWFUpload_0_0 Response Received: true Data:
SWF DEBUG: Event: uploadComplete : Upload cycle complete.
SWFUpload Instance Info
fileObjName:设置一个名字,在服务器端根据该名字来取上传文件的数据。默认值Filedata,老版本fileDataName
fileSizeLimit:上传文件的大小限制(HTML也会对上传文件大小进行限制,好像是4M),默认单位KB,接受单位:B、KB、MB、GB。
fileTypeDesc:可选的描述文件。这个字符串出现在浏览文件对话框的文件类型下拉列表中。
fileTypeExts:允许扩展的列表,可以上传。手动输入文件名称可以绕过这种级别的安全,所以你应该检查你的服务器端脚本文件类型。分号分隔的多个扩展应该予以运行(即"*.jpg;*.png;*.gif")。这只是对上传文件的类型做了限制,服务器端必须进行校验。
formData:附加参数的提交方式,json格式提交,后台request获取。如果是想动态提交,可以在onUploadStart事件对应的方法中附加参数。
$(function () {
$("#upload").uploadify({
'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
'swf': '/uploadify/uploadify.swf',
'uploader': '/ashx/upload.ashx',
'onUploadStart': function (file) {
$("#upload").uploadify("settings", "someOtherKey", 2);
}
});
});
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; string path = context.Request["upload"].ToString(); string s1 = context.Request["someKey"].ToString();
string s2 = context.Request["someOtherKey"].ToString();
string s3 = context.Request["someOtherKey"].ToString(); DirectoryInfo dir = new DirectoryInfo(path); context.Response.Write(dir.FullName);
}
height:按钮高度,默认值30,单位pixel(像素)。
method:文件上传的提交方式,默认值'post',可选值'post'或'get'。
multi:是否允许多文件同时上传,默认值true。
progressData:上传队列(多个进度条)显示的样式,默认值'percentage'(百分比),可选值'percentage'或'speed'。
queueID:上传队列的ID,如果此ID对应某个div或span(通常这样用),上传队列(多个进度条)将会显示在ID对应的div或span中。如果不设置,将会动态生成。
queueSizeLimit:设置最大同时放入队列数量。这不能限制上传文件的总数量。如果想限制上传文件的总数量,请用uploadLimit。如果超出设置值将会触发onSelectError事件。
removeCompleted:从队列中移除已完成上传的文件,默认值true。
removeTimeout:设置延时执行'removeCompleted'的时间,默认值3,单位'seconds'(秒)。
requeueErrors:文件上传失败,是否重新执行上传,默认值false。
successTimeout:设置服务器的响应时间,如果超出设置时间,SWF将假象为上传成功。
swf:文件uploadify.swf的路径。可以设置为根路径,也可以设置为相对路径。
uploader:服务器端处理文件的路径。可以设置为根路径,也可以设置为相对路径。
uploadLimit:设置最大上传数量。达到或超出设置值将会触发onUploadError事件。
width:按钮宽度,默认值120,单位pixel(像素)。(注意最后不要加单位)