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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 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初学者头痛的十四个问题
2006/07/12 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python Pillow Image Invert
2019/01/22 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
学生自我鉴定
2013/12/18 职场文书
运动会领导邀请函
2014/01/10 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
教师考察材料范文
2014/06/03 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
食品药品安全责任书
2015/05/11 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
springboot实现string转json json里面带数组
2022/06/16 Java/Android