亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用Plupload.js解決大文件上傳問(wèn)題, 帶進(jìn)度條和背景遮罩層

 更新時(shí)間:2017年03月15日 09:47:54   作者:lee576  
本篇文章主要介紹了c#+Plupload.js解決大容量文件上傳問(wèn)題, 帶進(jìn)度條和背景遮罩層,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。

大容量文件上傳早已不是什么新鮮問(wèn)題,在.net 2.0時(shí)代,HTML5也還沒有問(wèn)世,要實(shí)現(xiàn)這樣的功能,要么是改web.config,要么是用flash,要么是用一些第三方控件,然而這些解決問(wèn)題的方法要么很麻煩,比如改配置,要么不穩(wěn)定,比如文件上G以后,上傳要么死掉,要么卡住,通過(guò)設(shè)置web.config并不能很好的解決這些問(wèn)題。

這是一個(gè)Html5統(tǒng)治瀏覽器的時(shí)代,在這個(gè)新的時(shí)代,這種問(wèn)題已被簡(jiǎn)化并解決,我們可以利用Html5分片上傳的技術(shù),那么Plupload則是一個(gè)對(duì)此技術(shù)進(jìn)行封裝的前端腳本庫(kù),這個(gè)庫(kù)的好處是可以自動(dòng)檢測(cè)瀏覽器是否支持html5技術(shù),不支持再檢測(cè)是否支持flash技術(shù),甚至是sliverlight技術(shù),如果支持,就使用檢測(cè)到的技術(shù)。

那么這個(gè)庫(kù)到哪里下載,怎么搭建呢,比較懶的童鞋還是用Install-Package Plupload搞定吧,一個(gè)命令搞定所有事

下面給出一個(gè)例子,使用自已定義的控件來(lái)使用Plupload (Plupload也有自己的界面可以用),如下

Plupload支持的功能這里就不細(xì)說(shuō)了,什么批量上傳,這里我沒有用到,主要是感覺它支持的事件非常豐富,文件選取后的事件,文件上傳中的事件(可獲得文件的上傳進(jìn)度),文件上傳成功的事件,文件上傳失敗的事件,等等

我的例子主要是上傳一個(gè)單個(gè)文件,并顯示上傳的進(jìn)度條(使用jQuery的一個(gè)進(jìn)度條插件)

下面的例子主要是為文件上傳交給 UploadCoursePackage.ashx 來(lái)處理

      /******************************************************ProgressBar********************************************************/
      var progressBar = $("#loading").progressbar({ width: '500px', color: '#B3240E', border: '1px solid #000000' });
      /******************************************************Plupload***********************************************************/
      //實(shí)例化一個(gè)plupload上傳對(duì)象
      var uploader = new plupload.Uploader({
        browse_button: 'browse', //觸發(fā)文件選擇對(duì)話框的按鈕,為那個(gè)元素id
        runtimes: 'html5,flash,silverlight,html4',//兼容的上傳方式
        url: "Handlers/UploadCoursePackage.ashx", //后端交互處理地址
        max_retries: 3,   //允許重試次數(shù)
        chunk_size: '10mb', //分塊大小
        rename: true, //重命名
        dragdrop: false, //允許拖拽文件進(jìn)行上傳
        unique_names: true, //文件名稱唯一性

        filters: { //過(guò)濾器
          max_file_size: '999999999mb', //文件最大尺寸
          mime_types: [ //允許上傳的文件類型
            { title: "Zip", extensions: "zip" },
            { title: "PE", extensions: "pe" }
          ]
        },
        //自定義參數(shù) (鍵值對(duì)形式) 此處可以定義參數(shù)
        multipart_params: {
          type: "misoft"
        },
        // FLASH的配置
        flash_swf_url: "../Scripts/plupload/Moxie.swf",

        // Silverligh的配置
        silverlight_xap_url: "../Scripts/plupload/Moxie.xap",

        multi_selection: false //true:ctrl多文件上傳, false 單文件上傳 
      });

      //在實(shí)例對(duì)象上調(diào)用init()方法進(jìn)行初始化
      uploader.init();

      uploader.bind('FilesAdded', function (uploader, files) {
        $("#<%=fileSource.ClientID %>").val(files[0].name);
        $.ajax(
        {
          type: 'post',
          url: 'HardDiskSpace.aspx/GetHardDiskFreeSpace',
          data: {},
          dataType: 'json',
          contentType: 'application/json;charset=utf-8',
          success: function (result) {
            //選擇文件以后檢測(cè)服務(wù)器剩余磁盤空間是否夠用
            if (files.length > 0) {
              if (parseInt(files[0].size) > parseInt(result.d)) {
                $('#error-msg').text("文件容量大于剩余磁盤空間,請(qǐng)聯(lián)系管理員!");
              } else {
                $('#error-msg').text("");
              }
            }
          },
          error: function(xhr, err, obj) {
            $('#error-msg').text("檢測(cè)服務(wù)器剩余磁盤空間失敗");
          }
        });
      });

      uploader.bind('UploadProgress', function (uploader, file) {
        var percent = file.percent;
        progressBar.progress(percent);
      });

      uploader.bind('FileUploaded', function (up, file, callBack) {
        var data = $.parseJSON(callBack.response);
        if (data.statusCode === "1") {
          $("#<%=hfPackagePath.ClientID %>").val(data.filePath);
          var id = $("#<%=hfCourseID.ClientID %>").val();
          __doPostBack("save", id);
        } else {
          hideLoading();
          $('#error-msg').text(data.message);
        }
      });

      uploader.bind('Error', function (up, err) {
        alert("文件上傳失敗,錯(cuò)誤信息: " + err.message);
      });

后臺(tái) UploadCoursePackage.ashx 的代碼也重要,主要是文件分片跟不分片的處理方式不一樣

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace WebUI.Handlers
{
  /// <summary>
  /// UploadCoursePackage 的摘要說(shuō)明
  /// </summary>
  public class UploadCoursePackage : IHttpHandler
  {

    public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "text/plain";

      int statuscode = 1;
      string message = string.Empty;
      string filepath = string.Empty;

      if (context.Request.Files.Count > 0)
      {
        try
        {
          string resourceDirectoryName = System.Configuration.ConfigurationManager.AppSettings["resourceDirectory"];
          string path = context.Server.MapPath("~/" + resourceDirectoryName);
          if (!Directory.Exists(path))
            Directory.CreateDirectory(path);

          int chunk = context.Request.Params["chunk"] != null ? int.Parse(context.Request.Params["chunk"]) : 0; //獲取當(dāng)前的塊ID,如果不是分塊上傳的。chunk則為0
          string fileName = context.Request.Params["name"]; //這里寫的比較潦草。判斷文件名是否為空。
          string type = context.Request.Params["type"]; //在前面JS中不是定義了自定義參數(shù)multipart_params的值么。其中有個(gè)值是type:"misoft",此處就可以獲取到這個(gè)值了。獲取到的type="misoft";

          string ext = Path.GetExtension(fileName);
          //fileName = string.Format("{0}{1}", Guid.NewGuid().ToString(), ext);
          filepath = resourceDirectoryName + "/" + fileName;
          fileName = Path.Combine(path, fileName);

          //對(duì)文件流進(jìn)行存儲(chǔ) 需要注意的是 files目錄必須存在(此處可以做個(gè)判斷) 根據(jù)上面的chunk來(lái)判斷是塊上傳還是普通上傳 上傳方式不一樣 ,導(dǎo)致的保存方式也會(huì)不一樣
          FileStream fs = new FileStream(fileName, chunk == 0 ? FileMode.OpenOrCreate : FileMode.Append);
          //write our input stream to a buffer
          Byte[] buffer = null;
          if (context.Request.ContentType == "application/octet-stream" && context.Request.ContentLength > 0)
          {
            buffer = new Byte[context.Request.InputStream.Length];
            context.Request.InputStream.Read(buffer, 0, buffer.Length);
          }
          else if (context.Request.ContentType.Contains("multipart/form-data") && context.Request.Files.Count > 0 && context.Request.Files[0].ContentLength > 0)
          {
            buffer = new Byte[context.Request.Files[0].InputStream.Length];
            context.Request.Files[0].InputStream.Read(buffer, 0, buffer.Length);
          }

          //write the buffer to a file.
          if (buffer != null)
            fs.Write(buffer, 0, buffer.Length);
          fs.Close();

          statuscode = 1;
          message = "上傳成功";

        }
        catch (Exception ex)
        {
          statuscode = -1001;
          message = "保存時(shí)發(fā)生錯(cuò)誤,請(qǐng)確保文件有效且格式正確";

          Util.LogHelper logger = new Util.LogHelper();
          string path = context.Server.MapPath("~/Logs");
          logger.WriteLog(ex.Message, path);
        }
      }
      else
      {
        statuscode = -404;
        message = "上傳失敗,未接收到資源文件";
      }

      string msg = "{\"statusCode\":\"" + statuscode + "\",\"message\":\"" + message + "\",\"filePath\":\"" + filepath + "\"}";
      context.Response.Write(msg);
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

再附送一個(gè)檢測(cè)服務(wù)器端硬盤剩余空間的功能吧

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebUI
{
  public partial class CheckHardDiskFreeSpace : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    /// <summary>
    /// 獲取磁盤剩余容量
    /// </summary>
    /// <returns></returns>
    [WebMethod]
    public static string GetHardDiskFreeSpace()
    {
      const string strHardDiskName = @"F:\";

      var freeSpace = string.Empty;
      var drives = DriveInfo.GetDrives();
      var myDrive = (from drive in drives
        where drive.Name == strHardDiskName
        select drive).FirstOrDefault();
      if (myDrive != null)
      {
        freeSpace = myDrive.TotalFreeSpace+""; 
      }
      return freeSpace;
    }
  }
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS+CSS3制作炫酷的彈窗效果

    JS+CSS3制作炫酷的彈窗效果

    本文給大家分享使用js和css3制作的炫酷彈窗效果,整個(gè)背景模糊,要比純色加透明度高大上好多。對(duì)js彈窗效果感興趣的朋友一起學(xué)習(xí)吧
    2016-11-11
  • 改變狀態(tài)欄文字的js代碼

    改變狀態(tài)欄文字的js代碼

    這篇文章主要介紹了通過(guò)js如何改變狀態(tài)欄文字,需要的朋友可以了解下
    2014-06-06
  • JavaScript事件委托原理與用法實(shí)例分析

    JavaScript事件委托原理與用法實(shí)例分析

    這篇文章主要介紹了JavaScript事件委托原理與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript事件流以及事件委托相關(guān)原理、用法與操作注意事項(xiàng),需要的朋友可以參考下
    2018-06-06
  • 關(guān)于js中removeEventListener取消事件監(jiān)聽的坑

    關(guān)于js中removeEventListener取消事件監(jiān)聽的坑

    許多入前端不久的人都會(huì)遇到removeEventListener無(wú)法清除監(jiān)聽的情況,下面這篇文章主要給大家介紹了關(guān)于js中removeEventListener取消事件監(jiān)聽的坑,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • 微信小程序用戶后臺(tái)定位及錄音授權(quán)及請(qǐng)求示例

    微信小程序用戶后臺(tái)定位及錄音授權(quán)及請(qǐng)求示例

    這篇文章主要為大家介紹了微信小程序用戶后臺(tái)定位及錄音授權(quán)及請(qǐng)求示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-04-04
  • js結(jié)合css實(shí)現(xiàn)登錄后才能復(fù)制的效果實(shí)例

    js結(jié)合css實(shí)現(xiàn)登錄后才能復(fù)制的效果實(shí)例

    很多網(wǎng)站都有登錄后才能復(fù)制的限制,什么原理呢?css屬性u(píng)ser-select:none,通常會(huì)采用這種方式來(lái)禁止復(fù)制文本。但瀏覽開發(fā)者工具-審查元素,取消此樣式后,就可以選中文本了。想要完整地禁止復(fù)制,還需要通過(guò)js控制選擇的內(nèi)容。
    2023-07-07
  • js驗(yàn)證框架實(shí)現(xiàn)代碼分享

    js驗(yàn)證框架實(shí)現(xiàn)代碼分享

    這篇文章主要為大家分享了一個(gè)非常實(shí)用的js驗(yàn)證框架實(shí)現(xiàn)源碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式匯總

    JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式匯總

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式匯總的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • Sublime?Text?3插件Minify的安裝與使用(js代碼壓縮)

    Sublime?Text?3插件Minify的安裝與使用(js代碼壓縮)

    這篇文章主要介紹了Sublime?Text?3插件Minify的安裝與使用(js代碼壓縮),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • 在JavaScript中使用for循環(huán)的方法

    在JavaScript中使用for循環(huán)的方法

    這篇文章主要介紹了如何在JavaScript中使用for循環(huán),通過(guò)使用JavaScript?for...in循環(huán),我們可以循環(huán)對(duì)象的鍵或?qū)傩裕诘鷮?duì)象屬性或進(jìn)行調(diào)試時(shí),它可能很有用,但在迭代數(shù)組或?qū)?duì)象進(jìn)行修改時(shí),應(yīng)該避免使用for...in循環(huán),需要的朋友可以參考下
    2022-11-11

最新評(píng)論