bootstrap fileinput 上傳文件

時間 2019-11-12

標籤 bootstrap fileinput 上傳文件欄目 Bootstarp 简体版

原文原文鏈接

最近用到文件上傳功能，javascript

說實話：之前遇到過一次，COPY了別人的代碼java

結束！git

此次又要用，但是看到別人很酷的文件上傳功能，心癢了！github

好吧。簡單的辦法，找控件：json

bootstrap fileinputbootstrap

真是好看：服務器

bootstrap-fileinput源碼：https://github.com/kartik-v/bootstrap-fileinputapp

bootstrap-fileinput在線API：http://plugins.krajee.com/file-inputthis

bootstrap-fileinput Demo展現：http://plugins.krajee.com/file-basic-usage-demospa

但是好用嗎？不知道。用吧！

-----------------------------------------------

苦難開始了！

由於沒有用過，因此還直接COPY別的代碼：（http://blog.csdn.net/doc_wei/article/details/53783790）

儘管寫的很詳細了，但仍是不太懂！

老是提示：

405 method not allowed!

提示用了POST 請求。找了N種方案……

此處省略N萬字……

最後才發現我用錯了：

oFile.Init = function(ctrlName, uploadUrl) {
                var control = $('#' + ctrlName);

            //初始化上傳控件的樣式
                control.fileinput({
                language: 'zh', //設置語言
                uploadUrl: uploadUrl, //上傳的地址
}

我一直把這個uploadUrl當成是文件上傳保存的文件夾。

（JS怎麼可能會在服務器上存文件，這個理解但是差了十萬八千里呀）

由於是個文件夾，不接受任何的POST，GET

即使是我給了全部的謂詞容許

而實際上：這個uploadUrl 是後臺處理的上傳文件的頁面或是通常處理程序

好比：A.aspx 或 fileHandler.ashx

我用的是 .ashx

using System;
using System.Web;
using System.Text;

public class HandlerFile : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "application/json";
        HttpPostedFile uploadFile = context.Request.Files[0];

        string fileName = uploadFile.FileName;
        int fileSize = uploadFile.ContentLength;
        string fileExt = System.IO.Path.GetExtension(fileName).ToLower();
        string directoryPath = "~/upload/";
        uploadFile.SaveAs(System.Web.HttpContext.Current.Server.MapPath(directoryPath) + fileName); 
        context.Response.Write("{\"fileName\":"+"\""+fileName+"\"}");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

這樣就保存好了！

//注意：這裏保存，須要設置文件夾對對應的寫入權限，不然會收到 FORBBIDEN 提示

//我這裏用到的是根目錄下的UPLOAD 文件夾，因此要設置這個文件夾的寫入權限

JS部分：

menu={ 
fileInput: function ()
    {
        var oFile = new Object();
        //初始化fileinput控件（第一次初始化）
        oFile.Init = function(ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);

            //初始化上傳控件的樣式
            control.fileinput({
                language: 'zh', //設置語言
                uploadUrl: uploadUrl, //上傳的地址
                showUpload: true, //是否顯示上傳按鈕
                showCaption: true,//是否顯示標題
                browseClass: "btn btn-primary", //按鈕樣式     
                'theme': 'explorer',
                maxFileCount: 10, //表示容許同時上傳的最大文件個數
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "選擇上傳的文件數量({n}) 超過容許的最大數值{m}！"
            });

            //導入文件上傳完成以後的事件
            $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
                console.dir(data);           //這是在別人的指點下才會用的，能夠查看對象，這裏主要是JSON對象                 alert(data.files[0].name);
                //$("#div_startimport").show();
            });
        }
        return oFile;
    },
   onSubmit:function()
   {
　　　　$("#uploadFile").fileinput("upload");
   }
}

前臺HTML：

//只是簡單的示例而已，你們看一眼
//這裏不須要點擊SUBMIT 按鈕，只接點擊控件上的上傳文件便可
//一、若是須要經過點擊SUBMIT再上傳，須要 初始化時設置顯示上傳按鍵爲FALSE
// showUpload:false 不顯示上傳按鈕
// 在SUBMIT 的CLICK 事件中調用 上傳事件
// submitClick="menu.onSubmit();"
//二、若是想傳遞其餘參數，則須要設置
//　　uploadExtraData 選項，


<body style="padding:16px;">
    <div class="panel panel-default">
        <div class="panel-heading">
            this is a test
        </div>
        <div class="panel-body">
            <form enctype="multipart/form-data" action="../handlerFile.ashx">
                <!--<input id="kv-explorer" type="file" multiple>-->
                <input type="file" name="uploadfile" id="uploadfile" multiple class="file-loading" />
                <br>

                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="reset" class="btn btn-default">Reset</button>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript">

    $(document).ready(function () {
        var oFileInput = new menu.fileInput();
        oFileInput.Init("uploadfile", "../handlerFile.ashx");
    });
</script>

一、這裏須要注意的地方：

uploadExtraData 的設置位置有要求（不知道是否是我沒有弄明白）

我直接這樣寫代碼是取不到值的：

 onSubmit: function ()
    {
        var parentID = common.QueryString("parentId").toString();
        var level = common.QueryString("level").toString();
        var extrData = {'parentId':parentID,'level':level};
        ////console.log("the transfer URL____"+extrData);
        //$("#uploadfile").fileinput({});
        oFileInput.uploadExtraData = extrData;
        //console.dir(oFileInput);
        $("#uploadfile").fileinput("upload");
    }

須要在初始化里加入這個數據以下：

fileInput: function () {
        var oFile = new Object();
        //初始化fileinput控件（第一次初始化）
        oFile.Init = function (ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);
            var parentID = common.QueryString("parentId").toString();
            var level = common.QueryString("level").toString();
            var extrData = { 'parentId': parentID, 'level': level };
            //var  extrData = {'parentId':'1','level':'2'};
            //console.dir(extrData);
            //初始化上傳控件的樣式
            control.fileinput({
                language: 'zh', //設置語言
                uploadUrl: uploadUrl, //上傳的地址
                //allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件後綴
                showUpload: true, //是否顯示上傳按鈕
                showCaption: true,//是否顯示標題
                browseClass: "btn btn-primary", //按鈕樣式  
                uploadExtraData: extrData,
                'theme': 'explorer',
                maxFileCount: 10, //表示容許同時上傳的最大文件個數
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "選擇上傳的文件數量({n}) 超過容許的最大數值{m}！"
            });

            //導入文件上傳完成以後的事件
            $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
                console.dir(data);
                alert(data.files[0].name);
            });
        }
        return oFile;
    }

二、須要注意的是：

uploadExtraData 格式不能寫爲 uploadExtraData: '{"parentId": "_parentID", "level":"_level"}' 外面加'' 變成字符串了

應該直接寫成這樣： uploadExtraData: {'parentId':'_parentId','level':'_level'} 這裏是個對象

---------------------------------------------------------------------------

2017-09-14更:

------------------------------

把初始化方法改爲這樣能夠將用戶填寫的數據傳到後臺:

control.fileinput({
                language: 'zh', //設置語言
                uploadUrl: uploadUrl, //上傳的地址
                //allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件後綴
                showUpload: true, //是否顯示上傳按鈕
                showCaption: true, //是否顯示標題
                browseClass: "btn btn-primary", //按鈕樣式 previewId, index 
                uploadExtraData: function () {
                    var data = {
                        parentId: $("#fileType").val()
                    };
                    return data;
                },
                'theme': 'explorer',
                maxFileCount: 10, //表示容許同時上傳的最大文件個數
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "選擇上傳的文件數量({n}) 超過容許的最大數值{m}！"
            });