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 相关文章推荐
js DOM的学习笔记
Dec 22 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
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中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP 面向对象详解
2012/09/13 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
JavaScript自定义事件介绍
2013/08/29 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
庆六一开幕词
2015/01/29 职场文书
保管员岗位职责
2015/02/14 职场文书
2016猴年春节问候语
2015/11/11 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript