今年大部分是都在完善产品，这几天遇到了一个问题，原来的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 上传文件的更多相关文章

  1. jquery.form上传文件

    建立test文件夹 PHP代码: <?php //var_dump($_FILES['file']);exit; if(isset($_GET['option']) && $_G ...

  2. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  3. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  4. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  5. Jquery异步上传文件

    我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...

  6. jquery.uploadify上传文件配置详解(asp.net mvc)

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. c# 模拟表单提交，post form 上传文件、大数据内容

    表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...

  8. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除（逻辑删除） 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  9. c# 模拟表单提交，post form 上传文件、数据内容

    转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...

随机推荐

  1. Linux 性能优化排查工具

    下图1为 Linux 性能优化排查工具的总结 图1 诊断 CPU 工具 查看 CPU 核数 总核数 = 物理CPU个数 X 每颗物理CPU的核数 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU ...

  2. JSP 与Javabean 的交互技术

    JSP 与Javabean 的交互技术 JavaBean的属性可以是任意类型,并且一个JavaBean可以有多个属性.每个属性通常都需要具有相应的setter. getter方法,setter方法称为 ...

  3. JDBC学习笔记二

    JDBC学习笔记二 4.execute()方法执行SQL语句 execute几乎可以执行任何SQL语句,当execute执行过SQL语句之后会返回一个布尔类型的值,代表是否返回了ResultSet对象 ...

  4. flask那些事（一）

    flask配置文件 flask路由系统 @app.route() 装饰器中的参数 如果不明白装饰器 点击这里 methods : 当前 url 地址,允许访问的请求方式 @app.route(&quo ...

  5. Django之 数据库ORM

    一.ORM Django的 业务 少不了 跟数据库打交道,不然没有数据库保存一些数据将是一件很糟糕的事情.Django 对 数据库 支持原生的 SQL语句,但更好的对数据库支持,Django自己有一套 ...

  6. ajax的一些知识

    一.关于XMLHttpRequest的实例的属性和方法 实例的属性: 1.xhr.response 响应主体内容 2.xhr.responseText 响应主体内容字符串(JSON或者XML格式字符串 ...

  7. bert，albert的快速训练和预测

    随着预训练模型越来越成熟,预训练模型也会更多的在业务中使用,本文提供了bert和albert的快速训练和部署,实际上目前的预训练模型在用起来时都大致相同. 基于不久前发布的中文数据集chineseGL ...

  8. Tkinter--Text文本框样例

    #-*- coding:utf-8 -*- """ Text 文本框样例 实现功能有:Ctrl+a全选文本, 竖向滚动条,横向滚动条(不自动换行) 自动缩放 有谁知道全选 ...

  9. 微信小程序 - 事件 | 传递 | 冒泡

    事件 常见的事件有: 类型 触发条件 最低版本 touchstart 手指触摸动作开始   touchmove 手指触摸后移动   touchcancel 手指触摸动作被打断,如来电提醒,弹窗   t ...

  10. 【java】@SuppressWarnings

    作用:用于抑制编译器产生警告信息. 示例1——抑制单类型的警告: 示例2——抑制多类型的警告: 示例3——抑制所有类型的警告: 三.注解目标 通过 @SuppressWarnings 的源码可知,其注 ...