jQuery Ajax File Upload(附源码)
2010-11-23 20:29
399 查看
项目结构
Default.aspx
Upload.aspx
Scripts/…
style.css
效果图
客户端html代码
服务端处理代码Upload.aspx
Default.aspx
Upload.aspx
Scripts/…
style.css
效果图
客户端html代码
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadFile.aspx.vb" Inherits="Web.UploadFile" %> <!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 rel="Stylesheet" type="text/css" href="style.css" mce_href="style.css" media="all" /> <mce:script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js" mce_src="Scripts/jquery-1.4.1.min.js"></mce:script> <mce:script type="text/javascript" src="../Scripts/ajaxupload.3.5.js" mce_src="Scripts/ajaxupload.3.5.js"></mce:script> <mce:script type="text/javascript"><!-- $(function () { var btnUpload = $('#upload'); var status = $('#status'); new AjaxUpload(btnUpload, { action: 'Upload.aspx', //Name of the file input box name: 'uploadfile', onSubmit: function (file, ext) { if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) { // check for valid file extension status.text('Only JPG, PNG or GIF files are allowed'); return false; } status.text('Uploading...'); }, onComplete: function (file, response) { //On completion clear the status status.text(''); //Add uploaded file to list if (response === "success") { $('<li></li>').appendTo('#files').html('<img src="./uploads/' + file + '" mce_src="uploads/' + file + '" alt="" /><br />' + file).addClass('success'); } else { $('<li></li>').appendTo('#files').text(file).addClass('error'); } } }); }); // --></mce:script> </head> <body> <form id="form1" runat="server"> <div id="upload"> Upload File </div> <!-- Upload Button--> <div id="Div1" >Upload File</div><span id="status" ></span> <!--List Files--> <ul id="files" ></ul> </form> </body> </html>
服务端处理代码Upload.aspx
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace JqueryAjaxUploadTest { public partial class Upload : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { try { HttpPostedFile hpfFile = Request.Files["uploadfile"]; hpfFile.SaveAs(Server.MapPath("~/uploads/") + hpfFile.FileName); Response.Write("success"); } catch (Exception) { Response.Write("fail"); } } } }
相关文章推荐
- jQuery Ajax File Upload实例源码
- jQuery插件ajaxfileupload.js源码与使用
- jQuery Ajax File Upload(附源码)
- jQuery Ajax File Upload(附源码)
- jQuery插件之ajaxFileUpload
- JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
- jQuery插件之ajaxFileUpload
- jQuery插件之ajaxFileUpload
- jQuery插件之ajaxFileUpload
- 修改ajaxfileupload.js 源码 对ie9支持
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- JQuery插件:ajaxFileUpload.js
- jquery之ajaxfileupload异步上传插
- jQuery插件之ajaxFileUpload.未测试
- jQuery插件AjaxFileUpload实现ajax文件上传
- ajaxfileupload.js jQuery.handleError is not a function
- jQuery 关于ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二弹)
- jQuery插件之ajaxFileUpload异步上传
- jQuery异步上传文件插件ajaxFileUpload详细介绍