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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
json的使用小结
Jun 08 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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查询搜索引擎排名位置的代码
2010/01/05 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
详解json在php中的应用
2018/09/30 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
利用python开发app实战的方法
2019/07/09 Python
简单了解django orm中介模型
2019/07/30 Python
python中xlutils库用法浅析
2020/12/29 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
关于赌博的检讨书
2014/01/24 职场文书
出纳员岗位责任制
2014/02/11 职场文书
运动会跳远加油稿
2014/02/20 职场文书
人事科岗位职责范本
2014/03/02 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
检讨书范文2000字
2015/01/28 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
导游词之岳阳楼
2019/09/25 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers