layui-多个文件同时上传

最新推荐文章于 2024-05-27 17:05:30 发布

夜雨微微凉

最新推荐文章于 2024-05-27 17:05:30 发布

阅读量1.1w

点赞数

分类专栏： H5、css、js ASP.Net 文章标签：多个图片同时上传

本文链接：https://blog.csdn.net/qingshuiputeng/article/details/82877914

版权

H5、css、js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

ASP.Net

4 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadFiles.aspx.cs" Inherits="TCIQDOA.FilesManager.View.UploadFiles" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>上传文件</title>
	<script src="../../javascript/jquery-1.9.1.min.js"></script>
	<link href="../../javascript/layui-v2.3.0/css/layui.css" rel="stylesheet" />
	<script src="../../javascript/layui-v2.3.0/layui.js"></script>
	<script src="../../javascript/vue/vue.js"></script>
	<style>
		.Upload-ul {
			background-color: rgba(172, 172, 172, 0.137);
			padding: 10px 10px;
			clear: both;
		}

			.Upload-ul .file-file {
				position: relative;
				margin-top: 5px;
				margin-bottom: 5px;
				margin-left:0.5%;
			    margin-right:0.5%;
				padding: 10px;
				padding-right: 50px;
				background-color: rgba(172, 172, 172, 0.1);
				border: 1px rgba(172, 172, 172, 0.1) solid;
				border-radius: 4px;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

				.Upload-ul .file-file a {
					height: 20px;
					line-height: 20px;
				}

				.Upload-ul .file-file button {
					position: absolute;
					right: 10px;
					top: 50%;
					transform: translate(0%, -50%);
					z-index: 100;
					padding: 1px 2px 0px 4px;
					background-color: rgba(172, 172, 172, 0.0);
					color: gray;
				}

		.Upload-layui-btn:hover {
			color: red;
		}

		.Upload-ul .file-image {
			position: relative;
			margin-top: 5px;
			margin-bottom: 5px; 
			padding:5px;
			background-color: rgba(172, 172, 172, 0.1);
			border: 1px rgba(172, 172, 172, 0.1) solid;
			border-radius: 4px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			float: left;
			margin-left:0.5%;
			margin-right:0.5%;
			width: 32.333%;
			box-sizing: border-box;
		} 
			.Upload-ul .file-image img {
				width: 80px;
				height:80px;
			}
			.Upload-ul .file-image button {
				position: absolute;
				right: 10px;
				top: 50%;
				transform: translate(0%, -50%);
				z-index: 100;
				padding: 1px 2px 0px 4px;
				background-color: rgba(172, 172, 172, 0.0);
				color: gray;
			}
	</style>
	<script>
		var vueUploadFiles;
		$(function () {
			vueUploadFiles = new Vue({
				el: '#VueUploadFiles',
				data: {
					files: [],
					images: [],
				}
			});
			layui.use('upload', function () {
				var upload = layui.upload;
				//执行实例
				var uploadInst = upload.render({
					elem: '#btn_UploadImage',//绑定元素
					url: '../Controller/UploadFiles.ashx',//上传接口
					multiple: 'true',
					accept: "images|file|video|audio",
					exts: 'jpg|png|gif|bmp|jpeg|zip|rar|7z|pdf|doc|docx|xls|xlsx|avi|mp4|rmvb|wmv|txt|pub|pptx|ppt',
					data: {
						cmd: "UploadSomeFiles"
					},
					choose: function (obj) {
						//将每次选择的文件追加到文件队列
						var files = obj.pushFile();
						//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
						obj.preview(function (index, file, result) {
							var vuefiles = vueUploadFiles.files;
							var vueimages = vueUploadFiles.images;
							var isExist = false;
							for (var i = 0; i < vuefiles.length; i++) {
								var obj = vuefiles[i];
								if (obj.name == file.name) {
									delete files[index];
									isExist = true;
									break;
								}
							}
							for (var i = 0; i < vueimages.length; i++) {
								var obj = vueimages[i];
								if (obj.name == file.name) {
									delete files[index];
									isExist = true;
									break;
								}
							}
							if (!isExist) {
								if (file.name.getFileType() == "image") {
									vueUploadFiles.images.push({ name: file.name, url: "#", isUpload: false });
								} else {
									vueUploadFiles.files.push({ name: file.name, url: "#", isUpload: false });
								}
							}
						});
					},
					done: function (res) { //上传完毕回调
						if (res.isSuccess == 'true') {
							var files = vueUploadFiles.files;
							var images = vueUploadFiles.images;
							files.forEach(function (obj) {
								if (obj.name == res.name) {
									obj.url = res.url;
									obj.isUpload = true;
									return;
								}
							});
							images.forEach(function (obj) {
								if (obj.name == res.name) {
									obj.url = res.url;
									obj.isUpload = true;
									return;
								}
							});

						}
					},
					error: function () { //请求异常回调
					}
				});
			});
		});
		function deleteFileClick(name) {
			var files = vueUploadFiles.files;
			var images = vueUploadFiles.images;
			for (var i = 0; i < files.length; i++) {
				var obj = files[i];
				if (obj.name == name) {
					files.remove(obj);
					break;
				}
			}
			for (var i = 0; i < images.length; i++) {
				var obj = images[i];
				if (obj.name == name) {
					images.remove(obj);
					break;
				}
			}
		}
		//移除数组中的一个值
		Array.prototype.remove = function (val) {
			var index = this.indexOf(val);
			if (index > -1) {
				this.splice(index, 1);
			}
		};
		String.prototype.getFileType = function () {
			var suffix = this.split('.').pop();
			if (suffix == "jpg" || suffix == "png" || suffix == "gif" || suffix == "bmp" || suffix == "jpeg") {
				return "image";
			} else {
				return "file";
			}
		}
	</script>
</head>
<body>
	<div class="layui-form-item">
		<div class="layui-input-block layui-upload">
			<button type="button" class="layui-btn" id="btn_UploadImage">上传文件</button>
		</div>
	</div>
	<div id="VueUploadFiles" class="Upload-ul">
		<ul>
			<li class="file-file" v-for="file in files"> 
				<a v-bind:href="file.url">{{file.name}}</a>
				<i v-if="!file.isUpload" class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="color: green;">&#xe63d;</i>
				<button class="layui-btn layui-btn-xs Upload-layui-btn" v-bind:id="file.name" onclick="deleteFileClick(this.id)">
					<i class="layui-icon">&#x1006;</i>
				</button>
			</li>
		</ul>
		<div class="file-image" v-for="file in images">  
			<img v-bind:src="file.url"/> 
			<i v-if="!file.isUpload" class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="color: green;">&#xe63d;</i> 
			<button class="layui-btn layui-btn-xs Upload-layui-btn" v-bind:id="file.name" onclick="deleteFileClick(this.id)">
				<i class="layui-icon">&#x1006;</i>
			</button>  
		</div> 
		<div style="height: 1px; width: 100%; clear: both"></div>
	</div>
</body>
</html>

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace TCIQDOA.FilesManager.Controller
{
    /// <summary>
    /// UploadFiles 的摘要说明
    /// </summary>
    public class UploadFiles : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string cmd = context.Request["cmd"];
            switch (cmd)
            {
                case "UploadSomeFiles":
                    {
                        UploadSomeFiles(context);
                        break;
                    }
            }
        } 
        private void UploadSomeFiles(HttpContext context)
        {
            string path = "";
            string name = "";
            try
            {
                int count = context.Request.Files.Count;
                for (int i = 0; i < count; i++)
                {
                    int contentLength = context.Request.Files[i].ContentLength;//文件的大小
                    string contentType = context.Request.Files[i].ContentType;//文件的类型
                    string localPath= context.Request.Files[i].FileName;//文件的本地路径
                    string extension = Path.GetExtension(localPath).ToLower();//文件的后缀
                    string oldName = Path.GetFileName(localPath);
                    string newName = DateTime.Now.ToString("yyyyMMddHHmm_") + oldName.Replace(" ", "_").Replace("&", "_");
                    string filePath = GetPathForSaveFolder(); 
                    string fileSavePath = HttpContext.Current.Server.MapPath(filePath);
                    fileSavePath = fileSavePath + newName;  
                    context.Request.Files[i].SaveAs(fileSavePath);
                    path = filePath + newName;
                    name = oldName;
                }   
            }
            catch (Exception ex)
            {
                context.Response.Write("{\"isSuccess\":\"false\",\"url\":\"上传失败\"}"); 
            }
            finally
            {
                context.Response.Write("{\"isSuccess\":\"true\",\"url\":\"" + path + "\",\"name\":\"" + name + "\"}");
            }  
        } 
        private string GetPathForSaveFolder()
        {
            string path = GetAppPath() + "UploadFile/items/" + DateTime.Now.ToString("yyyy-MM") + "/";
            string fileSavePath = HttpContext.Current.Server.MapPath(path);
            if (!Directory.Exists(fileSavePath))
            {
                Directory.CreateDirectory(fileSavePath);
            } 
            return path;
        }
        private string GetAppPath()
        {
            string applicationPath = HttpContext.Current.Request.ApplicationPath;
            if (!applicationPath.EndsWith("/"))
            {
                applicationPath = applicationPath + "/";
            }
            return applicationPath;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

夜雨微微凉

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
layui-多个文件同时上传

&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadFiles.aspx.cs" Inherits="TCIQDOA.FilesManager.View.UploadFiles" %&gt;&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.
复制链接

扫一扫