JQuery插件ajaxfileupload.js异步上传文件实例

在服务器端做文件上传的过程中，如果使用web服务器短端的上传控件去上传文件的话，会导致页面刷新一次，这样对用户的体验就不是很友好了。ajaxfileupload.js是一款jQuery的异步上传文件插件，使用简单且容易上手。 前置条件：ajaxfileupload.js文件，百度下载一个就行。 JS引用： 代码如下: [removed][removed] [removed][removed] html代码： 代码如下:  &lt;input id= 在现代Web应用中，提供良好的用户体验至关重要，尤其是在处理文件上传这样的操作时。传统的文件上传方式通常需要用户提交表单，导致整个页面刷新，这显然不符合现代网页交互的需求。`ajaxfileupload.js` 是一个基于jQuery的插件，专门用于实现异步文件上传，避免页面刷新，提高用户交互性。 使用 `ajaxfileupload.js` 需要在HTML页面中引入jQuery库和该插件的JavaScript文件。例如： ```html <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script src="/Content/Js/ajaxfileupload.js"></script> ``` 然后，设置一个`<input>`标签用于选择待上传的文件： ```html <input id="fileToUpload" type="file" name="fileToUpload"> ``` 接着，编写JavaScript代码来处理异步上传。这里有一个函数 `saveCInfo()`，它会在用户选择文件后触发上传： ```javascript function saveCInfo() { var filename = document.getElementById("fileToUpload").value; if (filename != "") { $.ajaxFileUpload({ url: '../Order/OrderExec.ashx?oprMode=fileUpload' + "&filename=" + filename + "&billno=" + billno + "&companyname=" + companyname, secureuri: false, fileElementId: 'fileToUpload', //上传控件ID //dataType: 'json', error: function () { alert('error'); }, success: function (datax) { if (datax != "") { msgShow('系统提示', '上传成功!', 'info'); } else { msgShow('系统提示', '上传失败!', 'info'); } } }); } else { $.messager.alert('提示', '请选择上传文件', 'info'); } } ``` 这里的 `$.ajaxFileUpload()` 方法是 `ajaxfileupload.js` 提供的核心功能，它接受多个参数： - `url`: 服务器端处理文件上传的地址。 - `secureuri`: 是否使用安全的HTTP协议（默认为false）。 - `fileElementId`: 与HTML文件输入元素关联的ID。 - `error` 和 `success` 回调函数分别处理错误和成功情况。 在服务器端，你需要编写相应的代码来接收和处理上传的文件。在ASP.NET环境中，这可能是一个ASHX处理程序（这里是 `OrderExec.ashx`）： ```csharp public void FileUpload(HttpContext context) { try { context.Response.ContentType = "text/html"; string companyname = context.Request.Params["companyname"]; string billno = context.Request.Params["billno"]; string filename = context.Request.Params["filename"]; string name = companyname + "_" + billno + "_" + filename; HttpFileCollection files = HttpContext.Current.Request.Files; string savePath = context.Server.MapPath("~/upload/"); // 检查并创建保存路径 if (!System.IO.Directory.Exists(savePath)) { System.IO.Directory.CreateDirectory(savePath); } // 获取上传的文件 HttpPostedFile file = files[0]; if (file != null && file.ContentLength > 0) { string filePath = Path.Combine(savePath, name); file.SaveAs(filePath); } // 返回响应 context.Response.Write(name); } catch (Exception ex) { context.Response.Write(ex.Message); } } ``` 这段代码会接收到客户端发送的文件，并将其保存到服务器的指定目录下。注意，这只是一个基础示例，实际应用中可能需要添加更多验证和错误处理机制，如检查文件类型、大小限制等。 `ajaxfileupload.js` 是一个方便的工具，使得文件上传变得更简单、更流畅，同时保持页面的其他内容不被刷新。通过结合前端JavaScript和后端处理代码，可以构建出高效、用户友好的文件上传功能。