zoukankan      html  css  js  c++  java
  • 简单项目之批量上传

    之前做一小项目中需要批量上传功能,以前都是用的网上现成的Uploadify、WebUpload等插件,心想既然是小项目还是不用插件,所以不如自己写一个(非插件).

      1.页面

      批量上传页面

      技术分享
     1 <form action="" id="formid">
     2     @Html.Hidden("filelist")
     3     <table>
     4         <tr>
     5             <td>
     6                 文件:
     7             </td>
     8             <td>
     9                 <div id="filediv" class="filediv"></div>
    10             </td>
    11         </tr>
    12         <tr>
    13             <td>
    14                 文件:
    15             </td>
    16             <td>
    17                     <input type="file" id="file" name="wfile"  accept=".pdf" onchange="upload();" multiple="multiple" />
    18                     选择文件
    19               
    20                 <span style="padding:5px;color:red;" id="scts">未选择文件</span>
    21             </td>
    22         </tr>
    23     </table>
    24 </form>
    View Code

      美化上传按钮

      技术分享
    1    <a href="javascript:" style="display:inline-block; 100px;padding:5px; background:#007dce; position:relative; overflow:hidden;color:white;text-align:center;border-radius:4px;">
    2                     <input style="cursor:pointer;position:absolute; right:0; top:0; font-size:100px; opacity:0;" type="file" id="file" name="wfile" accept=".pdf" onchange="upload();" multiple="multiple" />
    3                     选择文件
    4                 </a>
    View Code

      文件列表

      技术分享
    1 .filediv {
    2     height: 100px;
    3     background-color: burlywood;
    4     overflow-x: hidden;
    5     overflow-y: auto;
    6 }
    View Code

      2.脚本

      选择文件

      技术分享
     1 function upload() {
     2     //获得已选文件集合
     3     var fs = document.getElementById("file").files;
     4     //元素数据
     5     var fsarray = $("#filelist").data("data");
     6     if (fsarray) {
     7         //添加新选择的文件
     8         $.each(fs, function (i, v) {
     9             if (fsarray.indexOf(v.name) == -1) {
    10                 fsarray.push(v);
    11                 $("#filediv").append("<div data-name=‘" + v.name + "‘ class=‘xdiv‘>" + v.name + "<span onclick=‘delpdf(this)‘>X</span></div>");
    12             }
    13         })
    14     }
    15     else {
    16         fsarray = new Array;
    17         $.each(fs, function (i, v) {
    18             fsarray.push(v);
    19             $("#filediv").append("<div data-name=‘" + v.name + "‘ class=‘xdiv‘>" + v.name + "<span onclick=‘delpdf(this)‘>X</span></div>");
    20         })
    21         //向元素附加已选择的数据
    22         $("#filelist").data("data", fsarray);
    23     }
    24     $("#scts").css("color", "green").text("已选择" + fsarray.length + "个文件");
    25 }
    View Code

      删除文件

      技术分享
    1 function delpdf(obj) {
    2     var ar = $("#filelist").data("data");
    3     ar.splice(ar.indexOf("data-name"), 1);
    4     $(obj).parent().remove();
    5     $("#scts").css("color", ar.length == 0 ? "red" : "green").text("已选择" + ar.length + "个文件");
    6 }
    View Code

      3.上传

      技术分享
     1   if (!$("#formid").validate().form()) return false;
     2                 var fd = new FormData($("#formid")[0]);
     3                 if ($("#wfile").outerHTML) {
     4                     $("#wfile").outerHTML = $("#wfile").outerHTML;
     5                 } else { 
     6                     $("#wfile").value = "";
     7                 }
     8                 for (var i = 0; i < $("#filelist").data("data").length; i++) {
     9                     fd.append("filelist[]", $("#filelist").data("data")[i])
    10                 }
    11                 $.ajax({
    12                     url: "/home/ManuscriptAdd",
    13                     type: "post",
    14                     dataType: "json",
    15                     data: fd,
    16                     processData: false,
    17                     contentType: false,
    18                     success: function (data) {
    19                         if (data.state == "200") {
    20                             $.jBox.tip("上传成功", "success");
    21                             window.location.reload();
    22                         }
    23                         else {
    24                             $.jBox.tip(data.content, "error");
    25                         }
    26                     },
    27                     error: function (xhr) {
    28                         $.jBox.closeTip();
    29                     }
    30                 })
    View Code
  • 相关阅读:
    autocomplete自动完成搜索提示仿google提示效果
    实现子元素相对于父元素左右居中
    javascript 事件知识集锦
    让 IE9 以下的浏览器支持 Media Queries
    「2013124」Cadence ic5141 installation on CentOS 5.5 x86_64 (limited to personal use)
    「2013420」SciPy, Numerical Python, matplotlib, Enthought Canopy Express
    「2013324」ClipSync, Youdao Note, GNote
    「2013124」XDMCP Configuration for Remote Access to Linux Desktop
    「2013115」Pomodoro, Convert Multiple CD ISO to One DVD ISO HowTo.
    「2013123」CentOS 5.5 x86_64 Installation and Configuration (for Univ. Labs)
  • 原文地址:https://www.cnblogs.com/huangwentian/p/6417849.html
Copyright © 2011-2022 走看看