jQuery Ajax File Upload实例源码


Posted in Javascript onDecember 12, 2016

本文实例为大家分享了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"); 
      } 
    } 
  } 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
js操作iframe父子窗体示例
May 22 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
jquery实现上传图片功能
Jun 29 jQuery
VueJs与ReactJS和AngularJS的异同点
Dec 12 #Javascript
layer实现弹窗提交信息
Dec 12 #Javascript
详解Javascript数据类型的转换规则
Dec 12 #Javascript
设置jquery UI 控件的大小方法
Dec 12 #Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 #Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 #Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 #Javascript
You might like
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
解决laravel session失效的问题
2019/10/14 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
js Dialog 实践分享
2012/10/22 Javascript
iframe实用操作锦集
2014/04/22 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python备份文件的脚本
2008/08/11 Python
Python 命令行参数sys.argv
2008/09/06 Python
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Django的session中对于用户验证的支持
2015/07/23 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python实现教务管理系统
2018/03/12 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
如何更优雅地写python代码
2019/07/02 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
安全资料员岗位职责
2013/12/14 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
优秀食品类广告词
2014/03/19 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
贷款委托书
2014/08/01 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
导游词之河北邯郸
2019/09/12 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang