使用jQuery插件AjaxUpload进行文件上传

22 浏览量更新于2024-07-15 收藏 99KB PDF 举报

"使用jQuery插件AjaxUpload实现文件上传功能的实例教程" 在Web开发中，文件上传是一项常见的功能，jQuery插件AjaxUpload提供了一种简便的方式实现这一操作，无需刷新页面即可完成文件的上传。本实例将详细介绍如何利用AjaxUpload实现文件上传的操作。首先，我们需要在HTML页面中创建相应的元素来构建文件上传的界面。如描述中所示，我们可以创建一个包含文本输入框（用于显示文件名）和两个按钮（一个用于上传文件，另一个用于删除已上传的文件）的`div`元素。例如： ```html <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden" id="hidFileName" /> <input type="button" id="btnUploadFile" value="上传" /> <input type="button" id="btnDeleteFile" value="删除" /> </div> ``` 接下来，我们需要引用AjaxUpload的JavaScript文件，这通常是在页面的`<head>`部分或`<body>`的底部通过`<script>`标签引入，例如： ```html <script src="/js/common/AjaxUpload.js" type="text/javascript"></script> ``` 引入插件文件后，我们可以在页面加载完成后执行JavaScript代码来初始化上传功能。这里定义一个`init`函数，用于设置按钮事件监听器，并调用`AjaxUpload`进行文件上传： ```javascript window.onload = function() { init(); } // 初始化 function init() { // 初始化文档上传 var btnFile = document.getElementById("btnUploadFile"); var doc = document.getElementById("doc"); var hidFileName = document.getElementById("hidFileName"); // 设置上传按钮的点击事件 btnFile.onclick = function() { // 在这里调用AjaxUpload插件并配置参数 } // 删除文件的按钮事件 document.getElementById("btnDeleteFile").onclick = function() { DelFile(doc, hidFileName); } } ``` 在`init`函数中，`btnFile.onclick`事件绑定的是一个函数，这个函数会调用AjaxUpload插件进行文件选择和上传。AjaxUpload的使用通常涉及以下几个主要步骤： 1. 实例化AjaxUpload对象，传入一个DOM元素（通常是`<input type="file">`），并配置相关参数，如上传URL、文件类型限制等。 2. 配置回调函数，包括`onSubmit`（文件选择后触发）、`onProgress`（上传进度更新时触发）、`onSuccess`（文件上传成功时触发）和`onError`（上传失败时触发）。 3. 调用AjaxUpload对象的`start`方法开始文件上传。示例中的`DelFile`函数用于删除已上传的文件，可能需要与服务器通信来完成实际的删除操作，或者仅仅清除本地存储的文件信息。在文件上传过程中，AjaxUpload会通过`onProgress`回调函数提供上传进度，开发者可以利用这个信息更新UI，显示上传进度条。`onSuccess`回调则可以用来处理服务器返回的结果，例如更新文件名显示或执行其他后续操作。总结起来，jQuery插件AjaxUpload简化了文件上传的过程，通过异步方式上传文件，使得用户体验更佳。通过理解和应用这个插件，开发者可以快速实现一个完整的文件上传功能，同时还能自定义上传过程中的各种交互和反馈。

}

});

}

//删除文档

function DelFile(doc, hidPut) {

hidPut.value = "";

doc.innerHTML = "<input type=\"text\" disabled=\"disabled\" />";

}

//删除图片

function DelImg(img, hidPut) {

hidPut.value = "";

img.src = "/images/nophoto.gif";

}

4、创建、创建/Common/UploadHandler.ashx处理程序处理程序

<%@ WebHandler Language="C#" Class="UploadHandler" %>

using System;

using System.Web;

using System.Text.RegularExpressions;

using System.IO;

public class UploadHandler : IHttpHandler {

private string _filedir = ""; //文件目录

/// <summary>

/// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功)

/// </summary>

/// <param name="context"></param>

public void ProcessRequest (HttpContext context) {

_filedir = context.Server.MapPath(@"/file/temp/");

try

{

string result = "3";

string fileType = context.Request.QueryString["fileType"]; //获取上传文件类型

if (fileType == "file")

{

result = UploadFile(context); //文档上传

}

else if (fileType == "img")

{

result = UploadImg(context); //图片上传

}

context.Response.Write(result);

}

catch

{

context.Response.Write("3");//3文件上传失败

}

/// <summary>

/// 文档上传

/// </summary>

/// <param name="context"></param>

/// <returns></returns>

private string UploadFile(HttpContext context)

{

int cout = context.Request.Files.Count;

if (cout > 0)

{

HttpPostedFile hpf = context.Request.Files[0];

if (hpf != null)

{

string fileExt = Path.GetExtension(hpf.FileName).ToLower();

//只能上传文件，过滤不可上传的文件类型

剩余14页未读，继续阅读

weixin_38519619

粉丝: 2
资源: 904

使用jQuery插件AjaxUpload进行文件上传

ajaxfileupload.js完整使用全套（带对应jquery+demo）

jquery ajax-upload

使用Ajax（ajaxupload.3.5.js） 上传文件的demo，移动端可用

使用jQuery插件AjaxUpload实现文件上传操作的实例教程

jQuery插件AjaxUpload：实现图片无刷上传

Jquery AjaxUpload实现文件上传功能代码

Jquery AjaxUpload实现文件上传实例 PHP版

jquery 插件ajaxupload 的简单应用

使用jQuery ajaxupload插件实现无刷新上传文件

jQuery插件AjaxFileUpload实现ajax文件上传

最新资源

使用Ajax（ajaxupload.3.5.js）上传文件的demo，移动端可用