bootstrap 上传控件样式_bootstrap 上传图片控件样式 - CSDN
精华内容
参与话题
  • Bootstrap文件上传美化 input()

    万次阅读 2018-11-12 14:45:43
    <div class="form-group"> <div class="col-sm-4 control-label">选择文件</div> <div class="col-sm-6"&...
    <div class="form-group">
       <div class="col-sm-4 control-label">选择文件</div>
       <div class="col-sm-6">
           <div class="input-group">
           <input id='location' class="form-control" onclick="$('#i-file').click();">
               <label class="input-group-btn">
                   <input type="button" id="i-check" value="浏览文件" class="btn btn-primary" onclick="$('#i-file').click();">
               </label>
           </div>
       </div>
       <input type="file" name="file" id='i-file'  accept=".xls, .xlsx" onchange="$('#location').val($('#i-file').val());" style="display: none">
    </div>
    

    在这里插入图片描述

    展开全文
  • Bootstrap File Input,最好用的文件上传组件

    万次阅读 多人点赞 2020-03-04 16:14:00
    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存。

    本篇介绍如何使用 Bootstrap File Input(最好用的文件上传组件)来进行图片的展示、上传,以及如何在服务器端进行文件保存。

    一、先来看效果图吧

    这里写图片描述

    这里写图片描述
    这里写图片描述

    二、引入插件的样式和脚本

    <link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" />
    <script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput_locale_zh.js"></script>
    

    http://plugins.krajee.com/file-input,这是其官方文档,里面有下载地址。

    三、在页面上添加组件

    <input type="file" name="image" class="projectfile" value="${deal.image}"/>
    
    1. type=file和class=projectfile,指明其为input file类型。
    2. name指定其在后台的获取key。
    3. value指定其在展示的时候图片路径。

    四、初始化

    projectfileoptions : {
    		showUpload : false,
    		showRemove : false,
    		language : 'zh',
    		allowedPreviewTypes : [ 'image' ],
    		allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
    		maxFileSize : 2000,
    	},
    // 文件上传框
    $('input[class=projectfile]').each(function() {
    	var imageurl = $(this).attr("value");
    
    	if (imageurl) {
    		var op = $.extend({
    			initialPreview : [ // 预览图片的设置
    			"<img src='" + imageurl + "' class='file-preview-image'>", ]
    		}, projectfileoptions);
    
    		$(this).fileinput(op);
    	} else {
    		$(this).fileinput(projectfileoptions);
    	}
    });
    
    1. 通过jquery获取对应的input file,然后执行fileinput方法。
    2. showUpload 设置是否有上传按钮。
    3. language指定汉化
      4. allowedFileTypes 、allowedFileExtensions 不知道为什么没有起到效果?
    4. maxFileSize 指定上传文件大小

    五、带file文件的form表单通过ajax提交

    我们先来看带file的form表单布局。

    <form class="form-horizontal required-validate" action="${ctx}/save?callbackType=confirmTimeoutForward" enctype="multipart/form-data" method="post" οnsubmit="return iframeCallback(this, pageAjaxDone)">
    
    	<div class="form-group">
    		<label for="" class="col-md-1 control-label">项目封面</label>
    		<div class="col-md-10 tl th">
    			<input type="file" name="image" class="projectfile" value="${deal.image}" />
    			<p class="help-block">支持jpg、jpeg、png、gif格式,大小不超过2.0M</p>
    		</div>
    	</div>	
    	<div class="form-group text-center ">
    		<div class="col-md-10 col-md-offset-1">
    			<button type="submit" class="btn btn-primary btn-lg">保存</button>
    		</div>
    	</div>
    </form>				
    
    1. enctype="multipart/form-data"必不可少。
    2. οnsubmit="return iframeCallback(this, pageAjaxDone)"方法,通过ajax提交表单(iframeCallback),并且上传成功后调用回调函数(pageAjaxDone)进行下一步操作。

    关于iframeCallback的介绍,请参照 summernote所在form表单的数据提交,这里就不多做介绍了。

    然后我们来介绍一下回调函数pageAjaxDone。

    function pageAjaxDone(json) {
    	YUNM.debug(json);
    	YUNM.ajaxDone(json);
    
    	if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
    		var msg = json[YUNM.keys.message];
    		// 弹出消息提示
    		YUNM.debug(msg);
    
    		if (YUNM.callbackType.confirmTimeoutForward == json.callbackType) {
    			$.showSuccessTimeout(msg, function() {
    				window.location = json.forwardUrl;
    			});
    		}
    	}
    }
    

    其主要的功能就是通过ajaxDone方法处理服务端传递过来的错误消息,假如说服务端操作成功,那么会显示提示信息,进而跳转到对应的url。

    六、服务器端保存图片

    请参照后端springMVC文件保存


    ps:以上博客留了一个小疑问,一直没有去研究,直到有位非常棒的小伙伴 ihchenchen 给了我如下的提醒:

    allowedFileTypes 、allowedFileExtensions 我知道为什么没有效果,因为 fileinput() 方法调用了两次,一次在 fileinput.js 里面最后几行,还有一次就是你自己写的 $(this).fileinput()。在fileinput.js里的是没有设置allowedFileTypes 、allowedFileExtensions 值的。

    有两种方法可以改:
    1、把fileinput.js里的最后几行调用注释掉。
    2、全部使用“data-”的方法来做,不写$(this).fileinput()。

    对于ihchenchen善意的提醒,我非常的感谢,虽然他提供的解释并没有解决我的疑问,但是我很喜欢这样有互动的技术交流,之前写很多博客,基本上很少发生这样善意并且行之有效的回答。这让我想起中国程序员和外国程序员,里面的故事让人震撼之余,捎带着些许的惭愧。那么如何做到“Ask questions, get answers, no distractions。”就显得特别珍贵,而“ihchenchen”则充满这种精神!

    六、解惑allowedFileTypes 、allowedFileExtensions

    之前困惑为什么bootstrap fileinput为什么设置了这两个属性后,没有效果,其实是我自己的误解,如今经过一番痛彻的领悟后恍然大悟!

    ①、allowedFileTypes

    allowedFileTypes
    array the list of allowed file types for upload. This by default is set to null which means the plugin supports all file types for upload. If an invalid file type is found, then a validation error message as set in msgInvalidFileType will be raised. The following types as set in fileTypeSettings are available for setup.

    [‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’]

    先从“allowedFileTypes”说起,该属性告知我们文件的选择类型,那么我们很容易想到这样的画面:
    这里写图片描述

    也就是说,我们希望此时的“所有文件”处不是“所有文件”,而是“image”之类的。显然这样的逻辑并没有错,但却不适合bootstrap fileinput!

    那么,这个时候我就很容易认为“allowedFileTypes” 没有起到作用!

    但请看下图:
    这里写图片描述

    吼吼,原来是在你选择了文件后发生的类型检查!

    ②、allowedFileTypes工作原理

    			$(this).fileinput({
    				showUpload : false,
    				showRemove : false,
    				language : 'zh',
    				allowedPreviewTypes: ['image'],
    		        allowedFileTypes: ['image'],
    		        allowedFileExtensions:  ['jpg', 'png'],
    				maxFileSize : 2000,
    				
    			});
    

    通过fileinput方法我们加载一个bootstrap fileinput组件,那么其内部是如何实现allowedFileTypes的呢?

    通过在fileinput.js文件中搜索“allowedFileTypes”关键字,我们得到如下代码:

     var node = ctr + i, previewId = previewInitId + "-" + node, isText, file = files[i],
                        caption = self.slug(file.name), fileSize = (file.size || 0) / 1000, checkFile, fileExtExpr = '',
                        previewData = objUrl.createObjectURL(file), fileCount = 0, j, msg, typ, chk,
                        fileTypes = self.allowedFileTypes, strTypes = isEmpty(fileTypes) ? '' : fileTypes.join(', '),
                        fileExt = self.allowedFileExtensions, strExt = isEmpty(fileExt) ? '' : fileExt.join(', ');
    

    然后我们继续看到如下的代码:

     if (!isEmpty(fileTypes) && isArray(fileTypes)) {
                        for (j = 0; j < fileTypes.length; j += 1) {
                            typ = fileTypes[j];
                            checkFile = settings[typ];
                            chk = (checkFile !== undefined && checkFile(file.type, caption));
                            fileCount += isEmpty(chk) ? 0 : chk.length;
                        }
                        if (fileCount === 0) {
                            msg = self.msgInvalidFileType.replace('{name}', caption).replace('{types}', strTypes);
                            self.isError = throwError(msg, file, previewId, i);
                            return;
                        }
                    }
    

    我们可以发现,文件类型的检查是发生在checkFile方法上,那么checkFile方法到底做了些什么呢?

     defaultFileTypeSettings = {
            image: function (vType, vName) {
                return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(png|jpe?g)$/i);
            },
            ...
    

    以上就是checkFile的内容。

    1. 也就是说当我们指定allowedFileTypes: ['image'],时,就会进行image的类型检查。
    2. 显然我们选择的txt文件不属于image类型,那么就会匹配不上,出现以上界面。
    3. 同时,该方法告诉我们,当不指定allowedFileTypes: ['image'],,只指定allowedFileExtensions: ['jpg', 'png'],就会执行vName.match(/\.(png|jpe?g)$/i),也就是文件后缀类型的检查,这点很关键啊,为我们接下来介绍“allowedFileExtensions”奠定基础。

    ③、allowedFileExtensions什么时候起作用

    上节我们讨论完“allowedFileTypes”,捎带说了“allowedFileExtensions”,那么如何让后缀进行check呢?

    			$(this).fileinput({
    				showUpload : false,
    				showRemove : false,
    				language : 'zh',
    				allowedPreviewTypes: ['image'],
    		        allowedFileExtensions:  ['jpg', 'png'],
    				maxFileSize : 2000,
    				
    			});
    

    fileinput组件此时指定的属性如上,没有了“allowedFileTypes”,并且指定允许的后缀类型为“[‘jpg’, ‘png’]”,也就是说,假如我们选择了gif的图片就会出现错误提示。
    这里写图片描述

    错误预期的发生了,那么请特别注意:

    image: function (vType, vName) {
                return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(png|jpe?g)$/i);
            },
    

    fileinput.js文件中原始的代码如下:

     image: function (vType, vName) {
                return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(gif|png|jpe?g)$/i);
            },
    

    image类型的后缀当然默认包含了gif,我只是为了举例说明,代码做了调整,请注意!


    好了,老铁,能否来个 2 连:

    1、为本文点赞,让更多的小伙伴看到这篇文章。
    2、微信搜索「沉默王二」,关注后回复关键字「666」可以获得一份 500G 的高清教学视频,Bootstrap 也有哟。

    展开全文
  • 一 直接使用bootstrap,利用简单的js控制 http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/ 非常简单,代码如下: Browse $('input[id=lefile]').change(function() { $('#...

    一 直接使用bootstrap,利用简单的js控制

    http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/

    非常简单,代码如下:

    <input id="lefile" type="file" style="display:none">
    <div class="input-append">
    	<input id="photoCover" class="input-large" type="text" style="height:30px;">
    	<a class="btn" οnclick="$('input[id=lefile]').click();">Browse</a>
    </div>
     
    <script type="text/javascript">
    $('input[id=lefile]').change(function() {
    $('#photoCover').val($(this).val());
    });
    </script>

    效果如下:


    不需要任何其他的js和css,只需要引入bootstrap和jquery即可

    其实这个就是拼接出来的,然后js控制显示文件名。

    效果如下:



    二  bootstrap-filestyle

    http://markusslima.github.io/bootstrap-filestyle/


    注意:此样式只能使用bootstrap2的css,版本为bootstrap3的css是不兼容的!!(妈蛋我就因为这个测试了老半天。。摔

    效果如下:




    三 bootstrap-file-input

    http://www.gregpike.net/demos/bootstrap-file-input/demo.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>bootstrap.file-input</title>
    
            <link href="css/bootstrap.min.css" rel="stylesheet" />
    
    		<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
            <script type="text/javascript" src="js/bootstrap.min.js"></script>
            <script type="text/javascript" src="js/bootstrap.file-input.js"></script>
    	
        </head>
    
        <body>
    		<!-- Change the wording using a title tag -->
    		<input type="file" title="Search for a file to add 1" class="btn-primary">
    		<br>
    		<br>
    		<input type="file" title="Search for a file to add 2" class="btn btn-primary">
    		<br>
    		<br>
    		<input type="file" title="Search for a file to add 3" class="btn-primary">
    		<br>
    		<br>
    		<input type="file" title="Search for a file to add 4" class="btn-primary">
    		<br>
    		<br>
    		<br>
    		<br>
    		<br>
    		Disable the styling:
    		
    		<!-- Disable the styling -->
    		<input type="file" data-bfi-disabled>
    		<script type="text/javascript">
    			$('input[type=file]').bootstrapFileInput();
    			
    		</script>
        </body>
    </html>

    引入了bootstrap.file-input.js但是直接引入有点小问题,说找不到bootstrapFileInput这个方法。于是我就改了一点js:

    /*
      Bootstrap - File Input
      ======================
    
      This is meant to convert all file input tags into a set of elements that displays consistently in all browsers.
    
      Converts all
      <input type="file">
      into Bootstrap buttons
      <a class="btn">Browse</a>
    
    */
    
    
    $.fn.bootstrapFileInput = function() {
    
    这里我直接用这个方法,把前面一行删掉就可以了
    
      this.each(function(i,elem){
    
    .........中间省略
      
    // Add the styles before the first stylesheet
    // This ensures they can be easily overridden with developer styles
    var cssHtml = '<style>'+
      '.file-input-wrapper { overflow: hidden; position: relative; cursor: pointer; z-index: 1; }'+
      '.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }'+
      '.file-input-name { margin-left: 8px; }'+
      '</style>';
    $('link[rel=stylesheet]').eq(0).before(cssHtml);
    
    };
    
    

    好了,到了看效果的时候啦~~




    四  Fine Uploader

    http://fineuploader.com/demos.html

    在官网下载是收费的。。我在github下载了一个。

    下载链接

    下载解压后是这样的:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>bootstrap.file-input</title>
    
            <link href="css/bootstrap.min.css" rel="stylesheet" />
    		<link href="css/fineuploader.css" rel="stylesheet" />
    
    		<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
            <script type="text/javascript" src="js/bootstrap.min.js"></script>
            <script type="text/javascript" src="js/all.fineuploader-4.3.1.min.js"></script>
    	
        </head>
    
        <body>		
    		<br>
    		<div id="manual-fine-uploader"></div>
    		<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
    		  <i class="icon-upload icon-white"></i> Upload now
    		</div>
    		<script>
    		  $(document).ready(function() {
    			var manualuploader = $('#manual-fine-uploader').fineUploader({
    			  request: {
    				endpoint: 'server/handleUploads'
    			  },
    			  autoUpload: false,
    			  text: {
    				uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
    			  }
    			});
    		 
    			$('#triggerUpload').click(function() {
    			  manualuploader.fineUploader('uploadStoredFiles');
    			});
    		  });
    		</script>
    
    	
    
    
    		<script>
    		  $(document).ready(function () {
    			$('#fine-uploader').fineUploader({
    			  request: {
    				endpoint: 'server/handleUploads'
    			  }
    			});
    		  });
    		</script>
    
    		<!-- Fine Uploader CSS
    		====================================================================== -->
    
    
    		<!-- Fine Uploader DOM Element
    		====================================================================== -->
    		<div id="fine-uploader"></div>
    
    		<!-- Fine Uploader template
    		====================================================================== -->
    		<script type="text/template" id="qq-template">
    		  <div class="qq-uploader-selector qq-uploader">
    			<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
    			  <span>Drop files here to upload</span>
    			</div>
    			<div class="qq-upload-button-selector qq-upload-button">
    			  <div>Upload a file</div>
    			</div>
    			<span class="qq-drop-processing-selector qq-drop-processing">
    			  <span>Processing dropped files...</span>
    			  <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
    			</span>
    			<ul class="qq-upload-list-selector qq-upload-list">
    			  <li>
    				<div class="qq-progress-bar-container-selector">
    				  <div class="qq-progress-bar-selector qq-progress-bar"></div>
    				</div>
    				<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
    				<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
    				<span class="qq-upload-file-selector qq-upload-file"></span>
    				<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
    				<span class="qq-upload-size-selector qq-upload-size"></span>
    				<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
    				<a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
    				<a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
    				<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
    			  </li>
    			</ul>
    		  </div>
    		</script>
        </body>
    </html>
    js和css,你们在文件夹里搜索就能找到,但是有一个all.fineuploader-4.3.1.min.js,是我在官网用chrome审查元素copy下来的。。经测试可以用

    注意中间代码中的Template

    如果没有这一段,console将会报错:


    然后我查到一个原因:

    大家可以阅读下,就是必须要有一个模板文件才可以运行。


    效果如下:(没导css对应的图片有点丑)


    五  其他


    http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-five.html

    这个网页里还推荐了其他几款比较不错的。

    jQuery File Uploader

    DropZoneJS

    Uploadify

    FineUploader


    展开全文
  • bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee

    源码以及API地址:

    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

    一、效果展示

     1、原始的input type='file',简直不忍直视。

    2、不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化

    3、bootstrap fileinput高级进化:中文化、可拖拽上传、文件扩展名校验(如果不是需要的文件,不让上传)

    拖拽上传

    上传中

    4、bootstrap fileinput究极进化:允许同时多线程上传多个文件。

    上传中

    上传完成后

    二、代码示例

     怎么样?效果如何?不要急,我们一步一步来实现以上的效果。

    1、cshtml页面

    首先引入需要的js和css文件。

            //bootstrap fileinput
                bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include(
                            "~/Content/bootstrap-fileinput/js/fileinput.min.js",
                            "~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"));
                bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include(
                            "~/Content/bootstrap-fileinput/css/fileinput.min.css"));
    @Scripts.Render("~/Content/bootstrap-fileinput/js")
    @Styles.Render("~/Content/bootstrap-fileinput/css")

    然后定义input type='file'标签

    复制代码
    <form>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
                    </div>
                    <div class="modal-body">
                        <a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;">下载导入模板</a>
                        <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
                    </div></div>
            </div>
        </div>
    </form>
    复制代码

    重点看这一句:

    <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />

    multiple表示允许同时上传多个文件,class=“file-loading”表示标签的样式。这里很重要,如果class="file",则中文化不能生效。

    2、js初始化

    $(function () {
        //0.初始化fileinput
        var oFileInput = new FileInput();
        oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");
    });
    复制代码
    //初始化fileinput
    var FileInput = function () {
        var oFile = new Object();
    
        //初始化fileinput控件(第一次初始化)
        oFile.Init = function(ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);
    
        //初始化上传控件的样式
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式     
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
        });
    
        //导入文件上传完成之后的事件
        $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
            $("#myModal").modal("hide");
            var data = data.response.lstOrderImport;
            if (data == undefined) {
                toastr.error('文件格式类型不正确');
                return;
            }
            //1.初始化表格
            var oTable = new TableInit();
            oTable.Init(data);
            $("#div_startimport").show();
        });
    }
        return oFile;
    };
    复制代码

    说明:

    (1)fileinput()方法里面传入的是一个json数据,它里面有很多属性,每个属性代表着初始化上传控件的时候的特性,如果这些属性都不设置,则表示使用默认的设置。如果园友们想看看它里面有哪些属性,可以打开fileinput.js的源码,在它的最后如图:

    这些属性如果不特意设置,就会使用默认值。

    (2)$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {}这个方法注册上传完成后的回调事件。也就是后天处理上传的文件之后进入这个方法里面处理。

    3、后台C#对应的方法

     还记得在js里面初始化控件方法fileinput()里面有一个参数url吗,这个url对应的值就指示C#后天对应的处理方法。还是贴出后台的处理方法。

    复制代码
         [ActionName("ImportOrder")]
            public object ImportOrder()
            {
                var oFile = HttpContext.Current.Request.Files["txt_file"];
                var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>();
    
                #region 0.数据准备
                var lstExistOrder = orderManager.Find();
                var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList();
                var lstTmModel = modelManager.Find();
                var lstTmMaterial = materialManager.Find();
                //var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX);
                //iMax_Import_Index = iMax_Import_Index == null ? 0 : iMax_Import_Index.Value;
                #endregion
    
                #region 1.通过Stream得到Workbook对象
                IWorkbook workbook = null;
                if (oFile.FileName.EndsWith(".xls"))
                {
                    workbook = new HSSFWorkbook(oFile.InputStream);
                }
                else if(oFile.FileName.EndsWith(".xlsx"))
                {
                    workbook = new XSSFWorkbook(oFile.InputStream);
                }
                if (workbook == null)
                {
                    return new { };
                }
    
                //...............处理excel的逻辑

    //orderManager.Add(lstOrder); lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); return new { lstOrderImport = lstOrderImport }; }
    复制代码

    由于博主的项目是上传excel,所以这里用是用的NPOI的逻辑,如果是上传图片等文件,可以使用GDI去处理图片。

    4、同时上传多个文件

    同时上传多个文件的时候,前台会发送多个异步的请求到后台,也就是说,当同时上传三个文件的时候,后台的ImportOrder方法会进入三次。这样就能使用多线程同时去处理三个文件。

    展开全文
  • 文件上传bootstrap风格样式(简洁直接可用无需引入任何css)
  • Bootstrap4文件上传控件美化

    千次阅读 2020-01-09 16:40:09
    Bootstrap拯救了不太会html+css的我,同时Bootstrap也太方便了,但是,也有一点受限默认一些功能看不到了,今天用到文件上传控件,HTML默认的和Bootstrap4的自定义的都不太合适。 参考:...
  • 前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对...既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧。经过一番查找,功夫不负有心人,还是被博主找到了这个...
  • bootstrap上传文件美化

    2020-02-07 13:35:43
    <div class="form-group"> <div class="col-sm-4 control-label">选择文件</div> <div class="col-sm-6"> <div class="input-group">...input id='location' clas...
  • 主要文件引用: &lt;script type="text/javascript" src="./resource/js/fileinput.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript".../scr
  • github地址:https://github.com/kartik-v/bootstrap-fileinput 官网:http://plugins.krajee.com/file-input 1.下载压缩文件. 2.导入文件${ctx}/components/fileinput/css/fileinput.
  • 最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法 ...
  • 先上代码: <div class="col-lg-6"> <input id="lefile" type="file" onchange="loadFile(this.files[0])" style="display: none"> <div class="input-group">...input id="filename" type="t...
  • Bootstrap-fileinput上传插件的使用详解

    千次阅读 2018-04-19 19:28:50
    由于公司项目的需求,需要实现动植物名录的添加,包括姓名等信息和图片等,需要使用bootstrap-fileinput的上传插件,在提交添加界面表单数据的同时上传一张或者多张图片,并将上传的图片保存到本地磁盘中(本文是f:盘...
  • 1.做了一天终于做出来了,在上传...用js写,更改了上传文件按钮的样式,但是没想到bootstrap真的太厉害了,样式还不错,可以预览,图片,限制文件的大小,格式等等,还有进度条。 后台的代码在之前写过了 这只有前台
  • html: 1 2 3 4 5 6 7 8 9 10 <divclass="form-group"> <labelclass="col-sm-3col-sm-6control-label">图片</label> <spanclass="problem-must"&...
  • 前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种...既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧。经过一番查找,功夫不负有心人,还是被博主找到了这个
  • 今天研究了一下午bootstrap扩展的文件上传控件,因为实在忍受不了默认无样式的文件上传。效果如图:是不是感觉瞬间高大上了很多,而且上传后的文件可以进行在线浏览,全屏播放:不要着急,下面附上具体实现过程。1....
  • 文件上传控件bootstrap-fileinput的使用

    千次阅读 2018-05-03 09:16:20
    原文:https://www.cnblogs.com/parker-yu/p/7207071.html一、准备1、插件下载地址:https://github.com/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下: js:插件核心js代码,引用fileinput....
  • 最近用到图片文件上传的功能,对比之后本人决定选用bootstrap fileinput控件,本篇介绍如何使用bootstrap fileinput.js,file input等插件,该插件功能强大,样式非常美观,并且支持上传文件预览,ajax同步或异步...
  • 前言:之前分享过很多bootstrap常用组件,包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着...
1 2 3 4 5 ... 20
收藏数 5,014
精华内容 2,005
关键字:

bootstrap 上传控件样式