jQuery.form 上传文件
今年大部分是都在完善产品，这几天遇到了一个问题，原来的flash组件不支持苹果浏览器，需要改。在网上搜了下，看到一个jQuery.form插件可以上传文件,并且兼容性很好，主要浏览器大部分都兼容，插件官网： http://malsup.com/jquery/form/。还有就是需要jQuery类库。
结果图片：
前端代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
<title>文件上传</title>
<style type="text/css">
.btn {
position: relative;
background-color: blue;
width: 80px;
text-align: center;
font-size: 12px;
color: white;
line-height: 30px;
height: 30px;
border-radius: 4px;
}
.btn:hover {
cursor: pointer;
}
.btn input {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0px;
left: 0px;
line-height: 30px;
height: 30px;
width: 80px;
}
#fileLsit li span {
margin-left: 10px;
color: red;
}
#fileLsit {
font-size: 12px;
list-style-type: none;
}
</style>
</head>
<body>
<div class="btn">
<span>添加附件</span>
<!--这里注意：file 标签必须具有name属性，由于没有加name属性，文件上传不到服务到哪-->
<input type="file" id="fileName" name="fileName" />
</div>
<ul id="fileLsit">
</ul>
<!--引入jquery类库-->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!--引入jquery.form插件-->
<script type="text/javascript" src="jQuery-Form/jquery.form.js"></script>
<script type="text/javascript">
jQuery(function () {
var option =
{
type: 'post',
dataType: 'json', //数据格式为json
resetForm: true,
beforeSubmit: showRequest,//提交前事件
uploadProgress: uploadProgress,//正在提交的时间
success: showResponse//上传完毕的事件
}
jQuery('#fileName').wrap(
'<form method="post" action="/uploads/upload.ashx?option=upload" id="myForm2" enctype="multipart/form-data"></form>');
jQuery('#fileName').change(function () {
$('#myForm2').ajaxSubmit(option);
});
});
//删除文件
var deleteFile = function (path, guid) {
jQuery.getJSON('/uploads/upload.ashx?option=delete', { path: path }, function (reslut) {
if (reslut[0].success) {//删除成功
jQuery('#' + guid).remove();
} else {//删除失败
alert(reslut[0].info);
}
});
}
//上传中
var uploadProgress = function (event, position, total, percentComplete) {
jQuery('.btn span').text('上传中...');
}
//开始提交
function showRequest(formData, jqForm, options) {
jQuery('.btn span').text('开始上传..');
var queryString = $.param(formData);
}
//上传完成
var showResponse = function (responseText, statusText, xhr, $form) {
if (responseText[0].success) {
//成功之后返回文件地址、文件名称等信息 拼接呈现到html里面。
var str = '<li id="' + responseText[0].guid + '"><a href="' + responseText[0].path + '">' + responseText[0].fileName + '</a><span onclick="deleteFile(\'' + responseText[0].path + '\',\'' + responseText[0].guid + '\')" >删除</span></li>';
jQuery('#fileLsit').append(str);
}
jQuery('.btn span').text('上传完成');
jQuery('.btn span').text('添加附件');
}
</script>
</body>
</html>
后台代码：相对简单，没有做严格的处理
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web; namespace Demo.uploads
{
/// <summary>
/// upload 的摘要说明
/// </summary>
public class upload : IHttpHandler
{
//特别说：在返回自己拼接的json格式数据，必须严格，出了bool、数字类型可以不加引号，其他必须加引号。不然在高版本的jQuery.js类库是不会走 success 事件的。
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; //标志 操作文件的类型
string option = context.Request["option"];
switch (option)
{
case "upload":
UploadFile(context);
break;
case "delete":
DeleteFile(context);
break;
} }
/// <summary>
/// 删除文件的方法
/// </summary>
/// <param name="context"></param>
private void DeleteFile(HttpContext context)
{
string path = context.Request["path"];
try
{
File.Delete(context.Server.MapPath(path));
context.Response.Write("[{\"success\":true}]"); }
catch (Exception e)
{
context.Response.Write("[{\"success\":false},\"info\":\"" + e.ToString() + "\"]"); }
finally
{
context.Response.End();
}
}
/// <summary>
/// 上传文件方法
/// </summary>
/// <param name="context"></param>
private void UploadFile(HttpContext context)
{
try
{
HttpPostedFile file = context.Request.Files[];
string fileName = file.FileName;
string path = "/fileUploads/" + fileName;
file.SaveAs(context.Server.MapPath(path));
//这里在返回信息的时候 给以个guid,因为在删除的时候方便 。
string str = "[{\"success\":true,\"fileName\":\"" + fileName + "\",\"path\":\"" + path + "\",\"guid\":\"" + Guid.NewGuid().ToString() + "\"}]";
context.Response.Write(str);
context.Response.End(); }
catch (HttpException e)
{
context.Response.Write("[{\"success\":false,\"info\":\"" + e.ToString() + "\"}]");
context.Response.End();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
jQuery.form 上传文件的更多相关文章
- jquery.form上传文件
建立test文件夹 PHP代码: <?php //var_dump($_FILES['file']);exit; if(isset($_GET['option']) && $_G ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- jQuery ajax上传文件实例
jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...
- Jquery异步上传文件
我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...
- jquery.uploadify上传文件配置详解(asp.net mvc)
页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- c# 模拟表单提交，post form 上传文件、大数据内容
表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...
- 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除（逻辑删除） 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据
1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...
- c# 模拟表单提交，post form 上传文件、数据内容
转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...
随机推荐
- 谈谈<? extends T> 和<? super T>理解
项目中遇到<? extends T> 和<? super T> 这两者,来说说自己的理解.首先我们先了解什么是泛型 什么是泛型 泛型是在编译阶段一种防止错误对象输入的机制.编译 ...
- 多线程学习笔记(一) InvokeRequired 和 delegate
入门示例: 假如有一个label,我们希望像走马灯一样,从1显示到100 private void button1_Click(object sender, EventArgs e) { ; i &l ...
- Pyqt5开发一款小工具(翻译小助手)
翻译小助手 开发需求 首先五月份的时候,正在学习爬虫的中级阶段,这时候肯定要接触到js逆向工程,于是上网找了一个项目来练练手,这时碰巧有如何进行对百度翻译的API破解思路,仿造网上的思路,我摸索着完成 ...
- c# 第9节 数据类型之引用类型
本节内容: 1:数据类型之引用类型 2:字符串要注意的两点: 1:数据类型之引用类型 实例: 2:字符串要注意的两点: 对变量进行重新赋值:其原本的字符串并没有销毁
- Tkinter--Text文本框样例
#-*- coding:utf-8 -*- """ Text 文本框样例 实现功能有:Ctrl+a全选文本, 竖向滚动条,横向滚动条(不自动换行) 自动缩放 有谁知道全选 ...
- svn版本库操作（四）
一.使用命令行模式访问 SVN 服务器 1. 检出(checkout) (1) 首先进入自己的工作目录,例如:D:\svnSpace cd D:\svnSpace (2) 运行 svn checkou ...
- SGD的动量（Momentum）算法
引入动量(Momentum)方法一方面是为了解决“峡谷”和“鞍点”问题:一方面也可以用于SGD 加速,特别是针对高曲率.小幅但是方向一致的梯度. 如果把原始的 SGD 想象成一个纸团在重力作用向下滚动 ...
- 20191003 「HZOJ NOIP2019 Round #8」20191003模拟
综述 试题为常州集训2019SCDay2 得分\(100+30(0)+28\) 时之终结 问题描述 HZOJ1310 题解 构造题. 发现部分分有一档是 \(Y\) 是 \(2^x\) ,于是自然想到 ...
- 在WEB显示实时视频流
转载自:https://www.jianshu.com/p/7ef5490fbef7 安装摄像头 这里使用的是树莓派的官方摄像头,使用普通的 USB 摄像头也可以,但前提是你能够搞的定它的驱动. 大概 ...
- 树莓派autossh反向隧道
本来我是将树莓派连接到路由器,从而在电脑端通过IP访问.远在局域网之外的队友怎么访问呢? ssh反向隧道 它的原理比较简单: 树莓派主动向某公网服务器建立ssh连接,并请求公网服务器开启一个额外的SS ...