开发环境bootstrap + .net 前后端一体

多文件上传

1.引用的前端文件包括https://download.csdn.net/download/oneofironlady/21068025
2.具体调用：
HTML：（多文件和单文件上传公用一个静态界面）styles.imageuploader.css

            <div id="fileDiv" class="htmleaf-container" style="display:none; position: absolute;width: 50%;height: 50%;overflow: auto;bottom: 25%;left: 20%;background-color: rgb(252, 252, 252);z-index: 9;font-size:20px"><button id="close" class="btn btn-default" type="button" onclick="showFilemdb(false,'fileDiv')" style="background-color: rgb(252, 252, 252);border: none;font-size: 20px;float: right;"><i class="glyphicon glyphicon-remove"></i></button><section role="main" class="l-main" style="margin-top:50px;margin-bottom:50px"><div id="loadmdb" class="uploader__box js-uploader__box l-center-box"><form action="#" method="post"><div class="uploader__contents"><label class="button button--secondary" for="fileinput">请选择文件</label><input id="fileinput" class="uploader__file-input" type="file" /></div><!--<input class="button button--big-bottom" type="submit" value="Upload Selected Files" />--></form></div></section></div>```

JS：选中文件、校验、上传等
1、多文件上传：jquery.imageuploader.js
说明：在调用界面需要初始化，初始化代码如下：


```javascriptvar upload;var newId = '';//添加id$(function () {if (operateAll == 'add') {newId = uuid();} else {newId = idAll;}//文件上传插件初始化upload = $('.js-uploader__box').uploader({'selectButtonCopy': '请选择或拖拽文件','instructionsCopy': '你可以选择或拖拽多个文件','submitButtonCopy': '上传选择的文件','furtherInstructionsCopy': '你可以选择或拖拽更多的文件','secondarySelectButtonCopy': '选择更多的文件','badFileTypeMessage': '上传格式不符，上传为jpg, png,jpeg ！','ajaxUrl': '../ajaxWeb/assetAjax.ashx?cmd=6&id=' + newId});if (operateAll != 'add') {$("#qrDiv").show();getResultById();$("#addId").text("修改");if (operateAll == 'detail') {$("#addId").text("详情");$("#fileButton").text("查看图片");disable();} else {$("#assetCode").attr("disabled", "true");$("#assetName").attr("disabled", "true");$("#buyTime").attr("disabled", "true");}}});//生成UUIDfunction uuid() {var s = [];var hexDigits = "0123456789abcdef";for (var i = 0; i < 36; i++) {s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);}s[14] = "4";s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);s[8] = s[13] = s[18] = s[23] = "";var uuid = s.join("");return uuid;}

单文件上传

var newId = '';//添加idvar options = [];var dommdb;var state;//初始化$(function () {newId = uuid();getTable();index = 0;options = $.extend({submitButtonCopy: '上传选择的文件',selectButtonCopy: '请选择或拖拽文件',dropZone: $('#loadmdb'),fileTypeWhiteList: ['mdb'],badFileTypeMessage: '上传格式不符，上传为mdb ！',ajaxUrl: '../ajaxWeb/uploadWorkAjax.ashx?cmd=1&id=' + newId,testMode: false}, options);state = {fileBatch: [],isUploading: false,isOverLimit: false,listIndex: 0};// create DOM elementsdommdb = {uploaderBox: $('#loadmdb'),submitButton: $('<button class="js-uploader__submit-button uploader__submit-button uploader__hide">' +options.submitButtonCopy + '<i class="js-uploader__icon glyphicon"></i></button>'),selectButton: $('<input style="height: 0; width: 0;" id="fileinput' + index + '" type="file" multiple class="js-uploader__file-input uploader__file-input">' +'<label for="fileinput' + index + '" style="cursor: pointer;" class="js-uploader__file-label uploader__file-label">' +options.selectButtonCopy + '</label>'),fileList: $('<ul class="js-uploader__file-list uploader__file-list"></ul>'),contentsContainer: $('<div class="js-uploader__contents uploader__contents"></div>')};// empty out whatever is in theredommdb.uploaderBox.empty();// create and attach UI elementssetupDOMmdb(dommdb);// set up event handlingbindUIEventsmdb();});//上传文件function fileButtonClick() {showFilemdb(true, 'fileDiv');//调用弹窗形式，未找到在哪限制只可选择图片}//图片上传弹框function showFilemdb(type, id) {if (type) {$("#" + id).show();} else {$("#" + id).hide();}}//生成UUIDfunction uuid() {var s = [];var hexDigits = "0123456789abcdef";for (var i = 0; i < 36; i++) {s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);}s[14] = "4";s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);s[8] = s[13] = s[18] = s[23] = "";var uuid = s.join("");return uuid;}//上传的相关function setupDOMmdb(dommdb) {dommdb.contentsContainer.append(dommdb.selectButton);dommdb.uploaderBox.append(dommdb.fileList).append(dommdb.contentsContainer).append(dommdb.submitButton)}function bindUIEventsmdb() {options.dropZone.on('dragover dragleave', function (e) {e.preventDefault();e.stopPropagation();});$.event.props.push('dataTransfer');options.dropZone.on('drop', selectFilesHandlermdb);dommdb.selectButton.on('click', function () { $('#loadmdb').value = null; });dommdb.selectButton.on('change', selectFilesHandlermdb);dommdb.submitButton.on('click', uploadSubmitHandlermdb);dommdb.uploaderBox.on('click', '.js-upload-remove-button', removeItemHandlermdb);if (options.testMode) {options.dropZone.on('uploaderTestEvent', function (e) {switch (e.functionName) {case 'selectFilesHandler':selectFilesHandlermdb(e);break;case 'uploadSubmitHandler':uploadSubmitHandlermdb(e);break;default:break;}});}}function addItemmdb(file) {var fileName = cleanNamemdb(file.name);var fileSize = file.size;var id = state.listIndex;var lastdate = file.lastModifiedDate;var sizeWrapper;var fileNameWrapper = $('<span class="uploader__file-list__text">' + fileName + '</span>');state.listIndex++;var listItem = $('<li class="uploader__file-list__item" data-index="' + id + '"></li>');var removeLink = $('<span class="uploader__file-list__button"><button class="uploader__icon-button js-upload-remove-button glyphicon glyphicon-remove" data-index="' + id + '"></button></span>');if (options.fileTypeWhiteList.indexOf(getExtensionmdb(file.name).toLowerCase()) !== -1) {state.fileBatch.push({ file: file, id: id, fileName: fileName, fileSize: fileSize, lastdate: lastdate });sizeWrapper = $('<span class="uploader__file-list__size">' + formatBytesmdb(fileSize) + '</span>');} else {sizeWrapper = $('<span class="uploader__file-list__size"><span class="uploader__error">' + options.badFileTypeMessage + '</span></span>');}listItem.append(fileNameWrapper).append(sizeWrapper).append(removeLink);dommdb.fileList.append(listItem);}function uploadSubmitHandlermdb() {if (state.fileBatch.length !== 0) {var data = new FormData();for (var i = 0; i < state.fileBatch.length; i++) {data.append('files[]', state.fileBatch[i].file, state.fileBatch[i].fileName);}var d = new Date(state.fileBatch[0].lastdate);data.append("lastdate", d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds());data.append("userId", sessionStorage.getItem("userId"));$.ajax({type: 'POST',url: options.ajaxUrl,data: data,cache: false,contentType: false,processData: false,success: function (data) {var result = JSON.parse(data);if (result.code == 0) {swal("上传成功！");showFilemdb(false, 'fileDiv');getSearch();}else {swal("上传失败！");}},error: function (a, b, c) {swal("请求失败!");}});}}function selectFilesHandlermdb(e) {e.preventDefault();e.stopPropagation();if (!state.isUploading) {// files come from the input or a dropvar files = e.target.files || e.dataTransfer.files || e.dataTransfer.getData;// process each incoming filefor (var i = 0; i < files.length; i++) {addItemmdb(files[i]);}}renderControlsmdb();}function renderControlsmdb() {if (dommdb.fileList.children().size() !== 0) {dommdb.submitButton.removeClass('uploader__hide');dommdb.contentsContainer.addClass('uploader__hide');} else {dommdb.submitButton.addClass('uploader__hide');dommdb.contentsContainer.removeClass('uploader__hide');}}function removeItemHandlermdb(e) {e.preventDefault();swal({title: "确定删除吗？",showCancelButton: true,confirmButtonColor: "#DD6B55",confirmButtonText: "确定删除!",cancelButtonText: "取消删除!",closeOnConfirm: false,closeOnCancel: false},function (isConfirm) {if (isConfirm) {if (!state.isUploading) {var removeIndex = $(e.target).data('index');removeItemmdb(removeIndex);$(e.target).parent().remove();swal("删除成功！");}renderControlsmdb();} else {swal("取消成功!");}});}function getExtensionmdb(path) {var basename = path.split(/[\\/]/).pop();var pos = basename.lastIndexOf('.');if (basename === '' || pos < 1) {return '';}return basename.slice(pos + 1);}function formatBytesmdb(bytes, decimals) {if (bytes === 0) return '0 Bytes';var k = 1024;var dm = decimals + 1 || 3;var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];var i = Math.floor(Math.log(bytes) / Math.log(k));return (bytes / Math.pow(k, i)).toPrecision(dm) + ' ' + sizes[i];}function cleanNamemdb(name) {name = name.replace(/\s+/gi, '-'); // Replace white space with dashreturn name.replace(/[^a-zA-Z0-9.\-]/gi, ''); // Strip any special characters}function removeItemmdb(id) {// remove from the batchfor (var i = 0; i < state.fileBatch.length; i++) {if (state.fileBatch[i].id === parseInt(id)) {state.fileBatch.splice(i, 1);break;}}// remove from the DOMdommdb.fileList.find('li[data-index="' + id + '"]').remove();}

bootstrap多文件上传和单文件上传相关推荐

java post 多文件报头_Spring MVC-------文件上传，单文件，多文件，文件下载
Spring MVC框架的文件上传是基于 commons-fileupload 组件的文件上传,只不过SpringMVC 框架在原有文件上传组件上做了进一步封装,简化了文件上传的代码实现,取消了不同上 ...
springboot文件上传，单文件上传和多文件上传，以及数据遍历和回显
springboot文件上传,单文件上传和多文件上传项目结构及pom.xml 创建文件表单页面编写javabean 编写controller映射 MultipartFile类 @RequestPa ...
Android之解决PC浏览器上传表单文件到手机服务器read数据错误导致有时候下载到手机的文件打开文字错乱问题
1 .问题手机客户端app通过java socket写了一个服务器,然后PC端通过浏览器访问服务端显示上传页面(这些资源都在手机端),然后其中有一个功能是PC端上传文件到手机服务器,然后把这个文件下 ...
python flask上传文件_flask 文件上传（单文件上传、多文件上传）--
文件上传在HTML中,渲染一个文件上传字段只需要将标签的type属性设为file,即. 这会在浏览器中渲染成一个文件上传字段,单击文件选择按钮会打开文件选择窗口,选择对应的文件后,被选择的文件名会显 ...
ssm上传文件进度条_Java 单文件、多文件上传 / 实现上传进度条
日常,工作在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传 ...
[SpringBoot2]文件上传_单文件与多文件上传的使用
<form role="form" th:action="@{/upload}" method="post" enctype=&quo ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
Vue的单文件组件和非单文件组件
单文件组件:一个文件中只包含一个组件,后缀为.vue(常用) <template><div><p class="tit ...
网址导航html单文件,GitHub - pizzasheep/OneHtmlNav: 单文件html的网络导航页面，简约并不简单...
OneHtmlNav 这是基于小呆导航的超级精简版本,之所以投入了不少精力折腾这个导航,是之前自己网站的导航有点功能不足,看到了小呆导航有我需要的功能,但是确是基于CMS的,有点复杂我又不想再搭建一个 ...
tp6实现文件上传接口(单文件上传)
返回给前端的接口格式: 路由: <?php // +---------------------------------------------------------------------- ...

bootstrap多文件上传和单文件上传

开发环境bootstrap + .net 前后端一体

多文件上传

单文件上传

bootstrap多文件上传和单文件上传相关推荐

最新文章

热门文章