jQuery Ajax File Upload实例源码

作者:lijiao 时间:2024-04-09 19:48:58 

本文实例为大家分享了jQuery Ajax File Upload实例源码,供大家参考,具体内容如下

项目结构

Default.aspx
Upload.aspx
Scripts/…
style.css

效果图

jQuery Ajax File Upload实例源码 

客户端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
0
投稿

猜你喜欢

  • MySQL窗口函数实现榜单排名

    2024-01-16 20:22:22
  • 微信小程序自定义底部弹出框动画

    2024-05-02 16:14:30
  • Mysql常用命令行大全

    2009-01-15 16:34:00
  • 关于 Web 字体:现状与未来[译]

    2009-11-24 13:50:00
  • 用CSS设计多种文本框与按钮样式风格

    2007-08-10 13:11:00
  • 利用Tkinter和matplotlib两种方式画饼状图的实例

    2021-09-22 18:10:35
  • python实时监控logstash日志代码

    2021-03-08 07:46:49
  • TensorFlow入门使用 tf.train.Saver()保存模型

    2023-06-07 15:29:45
  • perl的cgi高级编程介绍

    2022-10-04 23:41:28
  • numpy中轴处理的实现

    2021-08-14 12:06:16
  • bootstrapvalidator之API学习教程

    2024-05-22 10:36:49
  • Python实现简单的获取图片爬虫功能示例

    2023-01-31 06:15:13
  • 查询字符串中包含特殊字符的问题

    2009-01-09 13:13:00
  • CSS控制字体效果的思考

    2011-06-14 09:44:02
  • JS求解三元一次方程组值的方法

    2024-05-02 17:39:00
  • python 实现敏感词过滤的方法

    2022-08-09 10:22:51
  • python 如何将数据写入本地txt文本文件的实现方法

    2021-05-02 14:11:52
  • Python实现视频裁剪的示例代码

    2022-07-20 07:14:14
  • 学习python (1)

    2022-12-10 12:59:18
  • PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译

    2021-03-17 16:31:22
  • asp之家 网络编程 m.aspxhome.com