T O P

[资源分享]     webuploader批量导入文件

  • By - 楼主

  • 2021-03-01 18:00:09
  • 第一步:

    引入文件

    <!--引入CSS-->
    <link href="~/Content/JS/webuploader.css" rel="stylesheet" />
    <!--引入JS-->
    <script src="~/Content/JS/webuploader.js"></script>

    第二步:

    /

    /文本多个上传
    function UploadMultiFile() {
    var uploader = WebUploader.create({
    // 选完文件后,是否自动上传。
    auto: true,
    // swf文件路径
    swf: '~/Content/JS/Uploader.swf',
    // 文件接收服务端。
    server: '/Import/AllUpload',
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    pick: '#picker',
    // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
    resize: false,
    fileVal:'fileData'
    });
    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
    var itemTemplate = "";
    var fileSize = parseInt(file.size / 1024);
    if (fileSize >= 1024)
    fileSize = parseInt(fileSize / 1024) + "MB"
    else
    fileSize = parseInt(fileSize) + "KB"
    
    itemTemplate = '<div id="' + file.id + '" class="uploadify-queue-item">\
    <div style="width:50px;margin-right:2px;"><img src="/Content/Img/word.png" style="width:20px;height:20px;"></div>\
    <div class="cancel">\
    <a href=""></a>\
    </div>\
    <span class="fileName">'+ file.name + ' (' + fileSize + ')</span><span class="data"></span>\
    </div>'+ itemTemplate;
    $(".border").prepend(itemTemplate);
    $(".drag-tip").remove();
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
    var $li = $('#' + file.id),
    $percent = $li.find('.uploadify-progress .uploadify-progress-bar');
    
    // 避免重复创建
    if (!$percent.length) {
    $percent = $('<div class="uploadify-progress uploadify-progress-striped active">' +
    '<div class="uploadify-progress-bar" role="progressbar" style="width: 0%">' +
    '</div>' +
    '</div>').appendTo($li).find('.uploadify-progress-bar');
    }
    $li.find('.data').text(' 上传中').css("color", "red");;
    $percent.css('width', percentage * 100 + '%');
    });
    //文件成功、失败处理
    uploader.on('uploadSuccess', function (file) {
    $('#' + file.id).find('.data').text(' 上传成功').css("color", "green");
    });
    
    uploader.on('uploadError', function (file) {
    $('#' + file.id).find('.data').text(' 上传出错');
    });
    
    uploader.on('uploadComplete', function (file) {
    $('#' + file.id).find('.uploadify-progress').fadeOut();
    });
    }

     

    第三步:

    html标签

    <div style="height: 38px;">
    <div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="fileList" class="uploader-list"></div>
    <div class="btns">
    <div id="picker">标准文本批量导入(选择文件)</div>
    </div>
    </div>
    </div>
    <div class="border" style="height: 200px; border-radius: 5px;overflow-y:scroll">
    </div>

    第四步:

    后台代码

     1         [AcceptVerbs(HttpVerbs.Post)]
     2         public JsonResult AllUpload(HttpPostedFileBase fileData)
     3         {
     4             if (fileData != null)
     5             {
     6                 try
     7                 {
     8                     //string H = "";
     9                     string filePath = Common.Url;
    10                     if (fileData != null && fileData.ContentLength > 0)
    11                     {
    12                         string fileName = Path.GetFileName(fileData.FileName);//原始文件名称
    13                         string fileExtension = Path.GetExtension(fileName); // 文件扩展名
    14 
    15                         string aFirstName = fileName.Substring(fileName.LastIndexOf("\\") + 1, (fileName.LastIndexOf(".") - fileName.LastIndexOf("\\") - 1));  //文件名
    16                         string StdNo = "";
    17                         if (aFirstName.Contains("%"))
    18                             StdNo = aFirstName.Split('%')[0].Replace("_", "/");
    19                         else
    20                             StdNo = aFirstName.Replace("_", "/");
    21                         var S = db.Standards.FirstOrDefault(n => n.StdNo == StdNo);
    22                         if (S != null)
    23                         {
    24                             string fileName1 = DateTime.Now.ToString("yyyyMMddHHmmss") + Common.NO(S.StdNo) + Path.GetExtension(fileData.FileName);
    25                             filePath = filePath + Common.NO(fileName1);
    26                             if (System.IO.File.Exists(S.Url))
    27                                 System.IO.File.Delete(S.Url);
    28                             fileData.SaveAs(filePath);  
    29                         }
    30                     }
    31 
    32                     return Json(new { Success = true, FileName = Path.GetFileName(fileData.FileName), SaveName = Path.GetFileName(fileData.FileName) });
    33                 }
    34                 catch (Exception ex)
    35                 {
    36                     return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
    37                 }
    38             }
    39             else
    40             {
    41                 return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
    42             }
    43         }

     

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册