最近用到文件上传功能，

说实话：以前遇到过一次，COPY了别人的代码

结束！

这次又要用，可是看到别人很酷的文件上传功能，心痒了！

好吧。简单的办法，找控件：

bootstrap fileinput

真是好看：

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

bootstrap-fileinput在线API：http://plugins.krajee.com/file-input

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

可是好用吗？不知道。用吧！

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

苦难开始了！

因为没有用过，所以还 直接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[];

        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 按钮，只接点击控件上的上传文件即可
//1、如果需要通过点击SUBMIT再上传，需要 初始化时设置显示上传按键为FALSE
//  showUpload:false 不显示上传按钮
//  在SUBMIT 的CLICK 事件中调用 上传事件
//    submitClick="menu.onSubmit();"
//2、如果想传递其他参数，则需要设置
//　　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>

1、这里需要注意的地方：

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;

    }

2、需要注意的是：

      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}！"

            });

bootstrap fileinput 上传文件的更多相关文章

  1. bootstrap fileinput上传文件

    参考博客:https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974  https://www.cnblogs.com/parker-y ...

  2. .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  3. Bootstrap FileInput 上传 中文 API 整理

    Bootstrap FileInput 上传  中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看  会用就行 自己都不知道每个值是干嘛用的就问 ...

  4. 使用bootstrap创建上传文件

    1.导入样式,注意顺序 <!-- bootstrap样式 --> <link rel="stylesheet" href="/static/bootst ...

  5. bootstrap改变上传文件按钮样式，并显示已上传文件名

    参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...

  6. 关于Bootstrap fileinput 上传新文件，移除时触发服务器同步删除的配置

    在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...

  7. bootstrap fileinput上传返回400，404，500 等错误替换

    $(".uploadfile").on('filebatchuploaderror', function(event, data, msg) { $(".file-err ...

  8. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  9. 【Bootstrap】bootstrap-fileinput上传文件插件

    [bootstrap-fileinput] 这是个据传最好用的bootstrap相关联的文件上传控件,支持拖曳上传,多线程上传,上传文件预览等等功能. 首先还是说一下要引入的一些文件: <lin ...

随机推荐

  1. LMV实验

    在CentOS6.8上创建过程如下: #对需要创建lvm的卷进行磁盘分区[root@www ~13:40:48]#fdisk /dev/sde Device contains neither a va ...

  2. ContOS 小细节

    rm [filename] 这个filenam 中间如果有()那么就必须用/转义,如 demo_(2).txt 必须写为 demo_\(2\).txt 上传 rz下载 sz + 文件名退出 exit解 ...

  3. iview组件DatePicker type="datetimerange绑定初始默认时间值

    使用::value="[this.startTime,this.endTime]",绑定当天时间 如下: <DatePicker type="datetimeran ...

  4. 《精通Spring4.X企业应用开发实战》读后感第五章（装配Bean,依赖注入）

  5. 2-7 Flutter开发工具使用指南

    这里选择用哪个模拟器运行 Mac系统下可以通过这个Open IOS Siumlator打开IOS模拟器 debug用来调试的 可以创建新的模拟器 选择安卓模拟器的版本 这是sdk的配置 点开就是打开了 ...

  6. Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1

    Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1 这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表 ...

  7. ue4 enable input

    actor:  enable input 这个可以使多个actor接收输入 pawn: possese pawn使用enable input是不生效的 貌似不允许多个pawn同时接收输入,可以考虑直接 ...

  8. UE4]不使用角色蓝图、动画蓝图、状态机，用“24K纯C++”实现动画播放

    http://aigo.iteye.com/blog/2283454 原文作者:@玄冬Wong 不好意思,我稍稍标题党了,目前还不清楚如何用C++代码来实现BlendSpace和Montage的逻辑, ...

  9. IT兄弟连 JavaWeb教程 监听器4

    感知Session绑定事件的监听器 保存在Session域中的对象可以有多种状态:绑定(session.setAttribute("bean",Object)到Session中:从 ...

  10. 用户唯一性验证（ajax）

    验证用户添加或者修改时用户名的唯一性: 验证时机:用户名改变时,表单提交时. 1.jsp页面:(前端) <%@ page contentType="text/html;charset= ...