分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

bootstrap图片上传控件 ??fileinput

发布时间:2023-09-06 01:43责任编辑:傅花花关键词:暂无标签

前端

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); ???????}

bootstrap图片上传控件 ??fileinput

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved