FileUpload控件的用法

jquery fileupload控件的用法`jQuery File Upload`是一个基于`jQuery`的文件上传插件，用于实现文件的异步上传功能。

其用法如下：1. 需要加载的`js`文件：`jquey-1.8.3.min.js`、`jquery-ui-widget.js`、`jquery.iframe-transport.js`、`jquery.fileupload.js`。

2. `html`代码：```html<input id="fileupload" type="file" name="files()" data-url="server/php/" multiple>```3. `js`代码：```javascript$(function () {$("#fileupload").fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$("<p/>").text().appendTo(document.body);})},progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$("#progress .bar").css("width", progress + "%");},// 需要一个<div>容器用来显示进度<div id="progress"><div class="bar" style="width: 0%;"></div>});})```4. `API`：- `Initialization`：在上传按钮上调用`fileupload()`方法。

jQueryFileUpload⽂件上传插件使⽤详解　jQuery File Upload 是⼀个Jquery⽂件上传组件，⽀持多⽂件上传、取消、删除，上传前缩略图预览、列表显⽰图⽚⼤⼩，⽀持上传进度条显⽰；⽀持各种动态语⾔开发的服务器端。

特点：拖放⽀持；上传进度条；图像预览；可定制和可扩展的；兼容任何服务器端应⽤平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.）。

使⽤⽅法：1. 需要加载的js⽂件：jquey-1.8.3.min.jsjquery-ui-widget.jsjquery.iframe-transport.jsjquery.fileupload.js2. html代码：<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>3. js代码：$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text().appendTo(document.body);});}});}); 3.1 显⽰上传进度条：　　$('#fileupload').fileupload({ progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); } }); 3.2 需要⼀个<div>容器⽤来显⽰进：　<div id="progress"> <div class="bar" style="width: 0%;"></div> </div>4. API4.1 Initialization：在上传按钮上调⽤fileupload()⽅法;⽰例：$('#fileupload').fileupload();4.2 Options :1: url：请求发送的⽬标urlType: stringExample: '/path/to/upload/handler.json'2.Type: ⽂件上传HTTP请求⽅式，可以选择“POST”，“PUT”或者"PATCH",默认"POST"Type: stringExample: 'PUT'3. dataType:希望从服务器返回的数据类型，默认"json"Type: stringExample: 'json'4. autoUpload:默认情况下，只要⽤户点击了开始按钮被添加⾄组件的⽂件会⽴即上传。

中FileUpload文件上传控件应用实例_用法 FileUpload 控件，可以为用户供应一种将文件从用户的计算机发送到服务器的方法。

该控件在允许用户上载图片、文本文件或其他文件时很有用。

要上载的文件将在回发期间作为扫瞄器恳求的一部分提交给服务器。

在文件上载完毕后，您可以用代码管理该文件。

大致了解了一下FileUpload，让我们来看一下FileUpload 几个实际应用中问题的处理方法。

1.一次上传多个文件要一次上传多个文件，我们可以像传单个文件那样对每个文件单独进行处理，除此之外，我们还可以用法HttpFileCollection类捕获从Request对象发送来的全部文件，然后再单独对每个文件进行处理，代码如下：代码如下:protected void Button1_Click(object sender, EventArgs e){string filepath = Server.MapPath("upload") + "\\"; HttpFileCollection uploadFiles = Request.Files; for (int i = 0; i uploadFiles.Count; i++){HttpPostedFile postedFile = uploadFiles[i]; try{if (postedFile.ContentLength 0){Label1.Text += "文件 #" + (i + 1) + "：" + System.IO.Path.GetFileName(postedFile.FileName) + "br/";postedFile.SaveAs(filepath + System.IO.Path.GetFileName(postedFile.FileName)); }}catch (Exception Ex){Label1.Text += "发生错误： " + Ex.Message; }}}2.上传文件类型的验证对上传文件类型的验证既可以在客户端进行，也可以在服务器端进行。

jQueryFileUpload等插件的使⽤实例1、jQuery FileUpload需要的js：jquery.jsjquery.fileupload.jsjquery.iframe-transport.jsjquery.xdr-transport.jshtml:<div id="divAdd" title="添加"><div>+</div><input id="fileUpload" type="file"/></div>CSS:/** 选择⽂件按钮样式*/#fileUpload {position: absolute;top: 0;right: 0;margin: 0;opacity: 0;-ms-filter: 'alpha(opacity=0)';direction: ltr;cursor: pointer;width:100px;height:100px;}/* Fixes for IE < 8 */@media screen\9 {#fileUpload {filter: alpha(opacity=0);}}/** 其他样式*/#divAdd{border:1px solid #ccc;width:99px;height:99px;text-align:center;font-size:40px;margin:17px 5px 10px 5px;cursor: pointer;position: relative;overflow:hidden;}#divAdd div{margin-top:18%;}js初始化：function initUploadDlg(){$("#fileUpload").fileupload({url: "/WealthManagement/WFC/FileUpload.aspx",dataType: 'json',add: function (e, data) {var fileName = data.files[0].name;var fileType = fileName.substr(stIndexOf(".") + 1);// 可以通过data.files[0].size获取⽂件⼤⼩$.blockUI({message: $("#downloadMsg")});title = fileName.substring(stIndexOf('\\') + 1, stIndexOf('.'));$("#fileUpload").fileupload('option','formData',{'title': title, 'validDate': '', 'windcode': pageBaseInfo.Windcode}); // 传参不能放在初始化语句中，否则只能传递参数的初始化值data.submit();},progress: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$("#downloadMsg").html('已上传' + progress + '%');if(progress == '100'){$("#downloadMsg").html('处理中...');}},done: function (e, data) {var res = data.result.Response;if(res && res.Status == 0){// 更新⽂件列表updateFundFiles();}else{alert(res ? res.Message : "上传失败，请重试！");}$.unblockUI();}});后台代码（HttpHandler.cs）public class FileUploadHandler : IHttpHandler{public override void ProcessRequest(HttpContext context){FileUploadResponse res = new FileUploadResponse();try{// 获取⽂件流HttpFileCollection files = context.Request.Files;if (files.Count > 0){// 获取相关参数的⽅法string title = context.Request["title"];string validDate = context.Request["validDate"];string windcode = context.Request["windcode"] ;string path = FundIntroductionBiz.tempFilePath;if (!Directory.Exists(path)){Directory.CreateDirectory(path);}string fileName = windcode + "_" + DateTime.Now.ToString("yyyyMMddHHmmss") + System.IO.Path.GetExtension(files[0].FileName);string fullPath = path + fileName;files[0].SaveAs(fullPath);res.Response.Status = 0;res.Response.Message = "上传成功！";}}catch (Exception ex){res.Response.Status = 2;res.Response.Message = ex.Message;}context.Response.Write(JsonHelper.ToJson(res));context.Response.End();}}///<summary>///⽂件上传响应实体类///</summary>public class FileUploadResponse{public FileUploadEntity Response { get; set; }public FileUploadResponse(){Response = new FileUploadEntity();}///<summary>///返回信息实体类///</summary>public class FileUploadEntity{///<summary>/// 0:上传成功，1：上传失败, 2:程序异常///</summary>public int Status { get; set; }///<summary>///详细信息///</summary>public string Message { get; set; }}}注：上传按钮的样式采⽤的⽅式为，将input定位在所需按钮之上，并设为透明。

FileUpload 是Apache commons下面的一个子项目，用来实现Java环境下面的文件上传功能，与常见的SmartUpload齐名。

[编辑本段]一、使用组件FileUpload可以通过许多种不同的方式使用组件FileUpload，这个主要取决于你的应用程序。

在最简单的情况下，你可以调用单一的方法去解析这个Servlet Request，然后处理选项列表，并应用到你的应用程序。

另一方面，你可能决定自定义FileUpload，实现对选项列表种个别项完全控制。

例如：你可以将内容注入到数据库。

这里，我们将描述组件FileUpload的基本原则，并讲解一些简单的、常用的使用模式。

FileUpload自定制将在其他地方描述。

组件FileUpload依赖于Commons IO组件，因此在继续之前，要确保在你的工程classpath中有描述页中提到的相应版本。

（这里FileUpload版本为：commons- fileupload-1.2.1，Commons IO版本为：commons-io-1.4）[编辑本段]二、组件FileUpload是怎样工作的上传的文件要求包括一个根据RFC 1867（在HTML中基于表单的文件）编码的选项列表清单。

组件FileUpload可以解析这个请求，并给你的应用程序提供一份独立上传的项目清单。

无论每个项目背后如何执行都实现了FileItem接口。

这里将描述组件FileUpload库的普通API，这些API比较简单。

不过，对于最终的实现，你可以参考最新的API流。

每一个文件项目都有一些属性，这些可能在你的应用程序中应用到。

比如：每一个项目有一个名称name和内容类型congtent type，并提供了一个InputStream访问其数据。

另一方面，你处理项目的方法可能有所不同，这个依赖于是否这个项目是一个规则的表单域，即：这个数据是来自普通的表单文本，还是普通的HTML域或是一个上传文件。

FileUpload控件⽂件上传、扩容、限制⽂件类型及上传验证1、将选中⽂件上传到⽬标位置：<span style="white-space:pre"> </span>//获取上传⽂件的⽂件名称string name = FileUpload1.FileName;//将⽂件名称拼接成为想要的相对路径string path = "images/" + DateTime.Now.ToString("yyyyMMddhhmmss") + name;//执⾏另存为⽅法，但是这⾥需要绝对路径，那么使⽤路径映射FileUpload1.SaveAs(Server.MapPath(path));2、上传⽂件默认⼤⼩限制为4MB，可以扩容，⽅式为：<span style="white-space:pre"> </span>//在Web.config配置⽂件中的system.web标记中增加以下代码，最⼤长度默认为4096，单位为KB，下⾯为扩容10倍 <span style="white-space:pre"> </span><system.web><span style="white-space:pre"> </span> <httpRuntime maxRequestLength="40960"/><span style="white-space:pre"> </span></system.web>3、限制浏览⽂件的类型：<span style="white-space:pre"> </span><!--限制浏览⽂件的类型，添加accept属性--><asp:FileUpload ID="FileUpload1" runat="server" accept=".png,.jpg,.jpeg" />4、上传验证：分为两种⽅式，服务端验证会刷新页⾯，客户端使⽤js验证则不会刷新页⾯，推荐使⽤js验证。

FileUpload控件的用法详解FileUpload控件的用法详解FileUpload控件，主要用来上传文件。

关键的方法就是saveas(),即将本地文件“另存到"（上传)服务器的某个指定的目录.FileUpload.aspx内容:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FileUpLoad.aspx.cs" Inherits="FileUpLoad" %> 上传文件：Uploadfile.aspx.cs内容：using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class FileUpLoad : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){if (IsPostBack){Boolean fileOK = false;String path = Server.MapPath("~/Images/"); //设置服务器上传的路径，即文件上传的位置if (FileUpload1.HasFile){String fileExtension =System.IO.Path.GetExtension(FileUpload1.FileName).ToLowe r();String[] allowedExtensions ={ ".gif", ".png", ".jpeg", ".jpg" };for (int i = 0; i < allowedExtensions.Length; i++){if (fileExtension == allowedExtensions[i]){fileOK = true;}}}if (fileOK){try{FileUpload1.PostedFile.SaveAs(path+ FileUpload1.FileName);Label1.Text = "文件上传成功!";}catch (Exception ex){Label1.Text = "文件不能上传.";}}else{Label1.Text = "不能接受这种文件类型。

fileupload控件的用法-回复【fileupload控件的用法】是一个用于网页文件上传功能的控件，是开发人员经常使用的工具之一。

本文将一步一步回答有关fileupload控件的用法和使用指南。

第一步：了解fileupload控件的基本概念和作用fileupload控件是一种HTML元素，用于在网页上创建一个可供用户选择文件并上传的控件。

它允许用户通过浏览自己的计算机文件系统，从中选择一个或多个要上传的文件。

主要作用是方便用户将文件传输到服务器上，供网站后台进行处理和存储。

第二步：创建fileupload控件并添加到网页中在HTML代码中，使用<input type="file">标签创建一个fileupload控件，如下所示：<input type="file" name="uploadFile" id="uploadFile">其中，name属性用于指定控件的名称，id属性用于给控件指定一个唯一的标识符，供后续的JavaScript操作使用。

第三步：为fileupload控件添加事件处理程序通过JavaScript代码，可以为fileupload控件添加事件处理程序，以便在用户选择文件后执行相应的操作。

例如，可以为控件的onchange事件添加一个函数，当用户选择文件后自动触发该函数。

示例如下：document.getElementById("uploadFile").onchange = function() { 上传文件的操作}第四步：处理用户上传的文件在事件处理程序中，可以通过fileupload控件的value属性获取用户选择的文件路径。

如下所示：var filePath = document.getElementById("uploadFile").value;但需要注意的是，出于安全考虑，浏览器不允许JavaScript访问用户计算机的文件系统。

FileUpload⽂件上传控件1.FileUpload控件的主要功能是向指定⽬录上传⽂件。

FileUpload控件不会⾃动上传控件，⽽需要设置相关的事件处理程序，然后在程序中实现⽂件上传。

2.FileUpload控件常见的属性FileBytes:获取上传⽂件的字节数组；FileContent:获取指向上传⽂件的Stream对象；FileName：获取上传⽂件在客户端的名称；(仅获取⽂件名称)HasFile：获取⼀个布尔值，⽤于表⽰FileUpload控件是否已经包含⼀个⽂件；PostedFile：使⽤该对象可以获取上传⽂件的相关属性；(ContentLength上传⽂件的⼤⼩，ContentType⽂件类型，FileName获得上传⽂件在客户端的完整路径3.FileUpload控件常⽤⽅法SaveAs（String filename）-----------参数filename是指保存在服务器中的上传⽂件的绝对路径，在调⽤SaveAs⽅法之前，先判断HasFile属性是否为true4.使⽤FileUpload控件上传图⽚⽂件<asp:FileUpload ID="FileUpload1" runat="server"/><asp:Button ID="Button1" runat="server" Text="上传" OnClick="Button1_Click"/><br /><br /><asp:Image ID="Image1" runat="server"/><br /><br /><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>1protected void Button1_Click(object sender, EventArgs e)2 {3bool files = false;4if (this.FileUpload1.HasFile)5 {6//获取上传⽂件的后缀7 String fileExtension = System.IO.Path.GetExtension(this.FileUpload1.FileName).ToLower();8 String[] restrictExtension = { ".gif", ".jpg", ".bmp", ".png" };9//判断⽂件类型是否符合10for (int i = 0; i < restrictExtension.Length; i++)11 {12if (fileExtension == restrictExtension[1])13 {14 files = true;15 }16 }17//调⽤SaveAs⽅法实现上传18if (files == true)19 {20try21 {22this.Image1.ImageUrl = "~/image/" + FileUpload1.FileName;23this.FileUpload1.SaveAs(Server.MapPath("~/image/") + FileUpload1.FileName);bel1.Text = "⽂件上传成功";bel1.Text += "<br/>";bel1.Text += "<li>" + "原⽂件路径：" + this.FileUpload1.PostedFile.FileName;bel1.Text += "<br/>";bel1.Text += "<li>" + "⽂件⼤⼩：" + this.FileUpload1.PostedFile.ContentLength + "字节";bel1.Text += "<br/>";bel1.Text += "<li>" + "⽂件类型：" + this.FileUpload1.PostedFile.ContentType;31 }32catch33 {bel1.Text = "⽂件上传不成功";35 }36 }37else38 {bel1.Text = "只能够上传后缀为.gif、 .jpg、 .bmp、.png的⽂件夹";40 }41 }42 }*上传⼤⽂件主要修改Web.config⽂件来实现，在⽂件中添加httpRuntime节，在该节中修改两个参数：maxRequestLength为最⼤上传容量，executionTimeout为所响应的时间。