.net MVC5+EF6+bootstrap搭建框架，从入门到精通（三）——之（Bootstrap Fileinput）多图片上传

前言废话

人生最大的bug，就是当你有一天以为自己能一目十行，其实你只能看到九行，凑巧漏掉的就相当于《葵花宝典》中的“若不自宫，也能成功”。

.net mvc 实战多图片上传

需要用到的js文件和css文件，后面我会带附件地址的

前台页面代码

<script type="text/javascript">
    //页面加载后执行下面方法
    $(function () {
    //这是后台接收地址
        var path = "/Home/UploadFile";
        //调用Fileinput控件参数初始化数据fileupload就是下面file标签的id
        initFileInput("fileUpload", path);

    })
    //这是Fileinput初始化方法
    function initFileInput(ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl,  //上传地址
            minFileCount: 0,
            uploadAsync: true,
            maxFileCount: 2,
            enctype: 'multipart/form-data',
            maxFileSize: 5120,//限制上传大小KB
            overwriteInitial: true,//不覆盖已上传的图片
            allowedPreviewTypes: ['image', 'html', 'text', 'video', 'audio', 'flash', 'object'],
            allowedFileExtensions: ['jpg', 'png', 'gif'],//可以可选择的违建格式
            // elErrorContainer: '#kv-error-1',//错误显示的文本continner
            showBrowse: true,
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            browseOnZoneClick: true,
            ajaxSettings: {
                contentType: false
            }
        }).on("filepredelete", function (jqXHR) {
            var abort = true;
            if (confirm("确定删除此图片?")) {
                abort = false;
            }
            return abort; // 您还可以发送任何数据/对象，你可以接收` filecustomerror
            })
            //.on('filebatchpreupload', function (event, data) {
            //var n = data.files.length, files = n > 1 ? n + ' files' : 'one file';
            //if (!window.confirm("确定上传选择的文件吗 ?")) {
            //    return {
            //        message: "上传失败!", // upload error message
            //        data: {} // any other data to send that can be referred in `filecustomerror`
            //    };
            //}
            //})
            .on('fileuploaded', function (event, data, id, index) {//上传成功之后的处理
            console.log(data);
            var fname = data.response[0].msg;
            alert(fname);
                out = '<li>' + '文件 # ' + (index + 1) + ' - ' + fname + ' 上传成功！' + '</li>';
            $('#kv-success-1 ul').append(out);
            $('#kv-success-1').fadeIn('slow');
        }).on('filebatchpreupload', function (event, data, id, index) {
            $('#kv-success-1').html('<h4>上传状态</h4><ul></ul>').hide();
        })
    }
</script>

<div class="form-group">
        <label class="col-sm-2 control-label">图片上传:</label>
        <div class="col-sm-4">
            <input id="fileUpload" name="myfile" type="file" data-show-caption="true" multiple="multiple">
            <p class="help-block">支持jpg、jpeg、png格式，大小不超过2.0M</p>
        </div>
    </div>

后台控制器方法

        //获取web.config里面的标签<add key="attachFile" value="../attachmenti/"/>
        string attachFile = ConfigurationManager.AppSettings["attachFile"].Trim();
        //随机数
        Random Rdm = new Random();
        public string UploadFile()
        {
            if (!Directory.Exists(Server.MapPath(attachFile)))//如果不存在就创建file文件夹
            {
                Directory.CreateDirectory(Server.MapPath(attachFile));
            }
            string json = string.Empty;
            var image = Request.Files;
            if (image != null && image.Count > 0)
            {
                var _image = image[0];
                string _imageExt = System.IO.Path.GetExtension(_image.FileName).ToLower();
                string _imageName = DateTime.Now.ToString("yyyyMMddhhmmsssss") + _imageExt;
                //保存
                _image.SaveAs(Server.MapPath(attachFile + _imageName));
                int iRdm = Rdm.Next(0, 100);
                json = "[{\"msg\":\"" + attachFile+iRdm.ToString() + _imageName + "\"}]";
            }
            else
            {
                json = "[{\"error\":\"文件保存失败\"}]";
            }
            return json;
        }

选中后点上传

好了 多图上传到这可以了，下章是多图上传与表单数据一起提交