bootstrap图片上传控件 fileinput

前端

1.要引用的js

<link type="text/css" rel="stylesheet" href="~/HContent/css/fileinput.css" />  //-----------样式
<script src="~/HContent/js/fileinput.js"></script>                 //基本的js<script src="~/HContent/js/locales/zh.js"></script>                 //中文js

2.html代码

<div class="col-sm-10">
  <div class="file-loading">
     <input id="uploadFile" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
  </div>
</div>

3.js代码

        $(‘#uploadFile‘).fileinput({
            language: ‘zh‘,        //使用中文
            theme: ‘fa‘,          
            showUpload: false,      //upload按钮不显示
            uploadUrl: ‘@Url.Action("ImageRecive", "BeadHouse")‘,   //服务器url调用路径
            allowedFileExtensions: [‘jpg‘, ‘png‘, ‘gif‘],    //允许的文件格式
            overwriteInitial: false,
            maxFileSize: 1000,                    //文件最大尺寸
            maxFilesNum: 3,                      //文件最大数量
            slugCallback: function (filename) {
                return filename.replace(‘(‘, ‘_‘).replace(‘]‘, ‘_‘);
            },
        });

js的消息响应处理

$("#uploadFile").on("fileuploaded", function (event, data, previewId, index) {
            var d = data.response;//接收后台返回的数据
            if (d.Code == 1) {
                var bToObj = JSON.parse(d.Record);

                if (bToObj[0] != null) {

                    var test = window.location.origin + window.location.pathname;
                    var imgid = bToObj[0];

                }
            }
            else {
                $.alert(d.Message);
            }
        });

4.C#后台处理

      //图片接收后保存     public ActionResult ImageRecive()
        {
            string[] extName = { ".jpg", ".gif", ".jpeg", ".png", ".pdf" };
            var _directory = HttpContext.Server.MapPath("~/BHImage");
            List<string> filenames = new List<string>();
            HttpFileCollection upload = System.Web.HttpContext.Current.Request.Files;
            for (int i = 0; i < upload.Count; i++)
            {
                if (upload.Count > 3)
                {
                    return AjaxFail("限制上传文件数量");
                }
                HttpPostedFileBase file = Request.Files[i];
                string ext = Path.GetExtension(file.FileName).ToLower();
                if (!extName.Contains(ext))
                {
                    return AjaxFail("请上传jpg、gif、jpeg、png、pdf格式文件");
                };

                if (file.InputStream.Length > 1024000)
                {
                    return AjaxFail("上传的文件不要超过1M");
                }
                var namefix = System.Guid.NewGuid().ToString() + "_" + System.DateTime.Now.ToString("HHmmss") + Path.GetExtension(file.FileName);
                string file_name = "/" + namefix;
                filenames.Add(namefix);
                file.SaveAs(_directory + file_name);
            }
            return AjaxSuccess(filenames.Count.ToString(), filenames);
        }

原文地址:https://www.cnblogs.com/leolzi/p/8462001.html

时间: 2024-10-03 23:39:27

bootstrap图片上传控件 fileinput的相关文章

百度Ueditor多图片上传控件

发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面中添加对ueditor的脚本引用 <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../public/ue

JQ_Web Uploader图片上传控件

HTML <div id="uploader">    <div id="j_stat">    <input type="text" name="thumb" id="j_tb" value="" />    </div>    <div id="j_file">选择文件</div>    &l

基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader

(function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(this); var $clone = $this.clone(); var settings = $.extend({ id : $this.attr('id'), button:$this, uploader : '', formData:{}, auto : true, fileTypes : '*

Word图片上传控件-eWebEditor9x整合教程-Xproer.WordPaster

示例下载(JSP):eWebEditor9x, 示例下载(.NET):eWebEditor9x,   1.1. 集成到eWebEditor9x 主要步骤如下: 1.增加WordPaster文件夹   2.在eWebEditor编辑器中增加按钮   3.在js/buttons.js中添加事件响应   4.在引用页面初始化控件

***文件上传控件bootstrap-fileinput的使用和参数配置说明

特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在fileinput前引入. 比如: <!-- 集成上传插件bootstrap-fileinput 注意BS和JQ的js文件需要放在前面 --><link type="text/css" rel="stylesheet" href="<?php ec

上传控件显示缩略图

在网站程序中,经常会需要进行图片的上传,很多时候我们也需要在选择图片后将选择的图片作为缩略图显示在页面上,可以直接在页面上查看选择的是否是自己想要的图片或图片是否选择错误.以往通常的做法事先将图片上传到网站程序目录中,然后再把图片的网站图径给Image控件.这样做会有个弊端,那就是如果我选择的图怎不是想要的,想重新选择一经图片,那我岂不是要把之前上传的删了.很显示这样有些多此一举.有人可能会问为什么我们在选择图片后不直接把上传控件上的路径给Image控件呢?因为此时你的图片路径是本地路径,比如D

jquery文件上传控件 Uploadify

(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图

对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供

美观的单张上传控件 一个页面可以实例化多个

首先需要引用 js 和css 1 <!--上传控件--> 2 <script src="query.form.min.js"></script> 3 <link href="Img_List.css" rel="stylesheet" /> 4 <script src="Img_List.js"></script> Img_List.js 如下: 1 //