ASP.NET MVC4 利用uploadify.js多文件上传
页面代码：
1.引入js和css文件
<link href="~/Scripts/uploadify/uploadify.css" rel="external nofollow" rel="stylesheet" />
<style type="text/css">
#upDiv {
width: 550px;
height: 400px;
border: 2px solid red;
margin-top: 30px;
margin-left: 50px;
float: left;
}
div form {
text-align: center;
vertical-align: middle;
}
h2, h3 {
text-align: center;
color: #00B2EE;
}
#upList {
width: 900px;
height: 400px;
float: left;
margin-top: 30px;
margin-left: 50px;
overflow-y: scroll;
border: 2px solid red;
}
#filelist {
width: 45%;
height: 400px;
float: left;
}
#lineDiv {
width: 50px;
height: 400px;
float: left;
}
#imglist {
width: 45%;
height: 400px;
float: left;
}
#form1 {
margin-top: 25px;
}
img {
width: 25px;
height: 25px;
}
.btn {
width: 150px;
height: 40px;
text-align: center;
background-color: #b58061;
color: white;
}
p {
cursor: pointer;
}
</style>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/uploadify/jquery.uploadify-3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#myfile").uploadify({
"auto": false,
"swf": "../Scripts/uploadify/uploadify.swf",
"uploader": "../Home/UploadFiles",
"removeCompleted": false,
"onUploadSuccess": function (file, data, response) {
},
"onQueueComplete": function () {
window.location.reload();
}
});
$.ajax({
url: "/home/loadFileInfo",
datatype: 'html',
success: function (result) {
$('#filelist').append(result);
}
});
$.ajax({
url: "/home/loadImgInfo",
datatype: 'html',
success: function (result) {
$('#imglist').append(result);
}
});
});
//在线打开文件
function openFile(doc) {
try {
var fileName = $(doc).text();
var url = window.location.protocol + "//" + window.location.host + "/UploadFile/File/"
url = url + fileName;
window.open(url);
} catch (EventException) {
alert("此文件无法打开！");
}
}
//在线打开图片
function openImg(doc) {
var fileName = $(doc).text();
var url = window.location.protocol + "//" + window.location.host + "/UploadImg/Img/"
url = url + fileName;
window.open(url);
}
</script>
2.body内代码
<body style="background: url(../../Images/bg.jpg) no-repeat; background-size: 1600px; width: 1600px; height: 700px; ">
<h2 style="text-align:center;">ASP .NET MVC4 多文件文件上传实例</h2>
<form id="form1">
<div>
<input type="file" id="myfile" name="myfile" />
</div>
<div>
<a class="btn" href="javascript:$('#myfile').uploadify('upload');" rel="external nofollow" >上传第一个</a>
<a class="btn" href="javascript:$('#myfile').uploadify('upload','*');" rel="external nofollow" >上传队列</a>
<a class="btn" href="javascript:$('#myfile').uploadify('cancel');" rel="external nofollow" >取消第一个</a>
<a class="btn" href="javascript:$('#myfile').uploadify('cancel', '*');" rel="external nofollow" >取消队列</a>
</div>
</form>
<div id="upList">
<div id="filelist">
<h3>文件列表</h3>
</div>
<div id="lineDiv"></div>
<div id="imglist">
<h3>图片列表</h3>
</div>
</div>
</body>
后台代码：
public ActionResult loadFileInfo()
{
StringBuilder sb = new StringBuilder();
DirectoryInfo theFolder = new DirectoryInfo(Server.MapPath("~/UploadFile/"));
DirectoryInfo[] dirInfo = theFolder.GetDirectories();
//遍历文件夹
foreach (DirectoryInfo NextFolder in dirInfo)
{
FileInfo[] fileInfo = NextFolder.GetFiles();
//遍历文件
foreach (FileInfo NextFile in fileInfo)
{
string exStr = NextFile.Extension;
string str = NextFile.Name;
if (exStr == ".zip" || exStr == ".7z" || exStr == ".rar" || exStr.ToLower() == ".rars")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/zip.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".doc" || exStr == ".docx")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/words.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".ppt" || exStr == ".pptx")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/ppt.jpg' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".xlsx" || exStr == ".xls" || exStr == ".XLS")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/excel.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".pdf")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/pdf.jpg' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".js" || exStr == ".JS")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/js.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".html" || exStr == ".HTML")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/html.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".txt" || exStr == ".TXT")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/txt.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".mp3" || exStr == ".wmv" || exStr == ".aac")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/mp3.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".avi" || exStr == ".mov" || exStr == ".mp4" || exStr == ".ram" || exStr == ".flv")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/video.png' width='25' height='25' />" + str + "</p>");
}
else {
sb.Append("<p onclick='openFile(this)'><img src='../../Images/file.jpg' width='25' height='25' />" + str + "</p>");
}
}
}
return Content(sb.ToString());
}
public ActionResult loadImgInfo()
{
StringBuilder sb = new StringBuilder();
DirectoryInfo theFolder = new DirectoryInfo(Server.MapPath("~/UploadImg/"));
DirectoryInfo[] dirInfo = theFolder.GetDirectories();
//遍历文件夹
foreach (DirectoryInfo NextFolder in dirInfo)
{
FileInfo[] fileInfo = NextFolder.GetFiles();
//遍历文件
foreach (FileInfo NextFile in fileInfo)
{
string str = NextFile.Name;
sb.Append("<p onclick='openImg(this)'><img src='../../Images/img.png' width='25' height='25' />" + str + "</p>");
}
}
return Content(sb.ToString());
}
public ActionResult UploadFile()
{
string filepath = "";
bool fileOK = false;
//判断是否已经选择上传文件
HttpPostedFileBase file = Request.Files["myfile"];
if (file != null && file.ContentLength > 0)
{
String fileExtension = System.IO.Path.GetExtension(file.FileName).ToLower();
//判断是否为图片类型
String[] allowedExtensions = { ".gif", ".png", ".bmp", ".jpg" };
for (int i = 0; i < allowedExtensions.Length; i++)
{
if (fileExtension == allowedExtensions[i])
{
fileOK = true;
}
}
if (fileOK)
{
//设置上传目录
string path = Server.MapPath("~/UploadImg/Img/");
if (!Directory.Exists(path))
Directory.CreateDirectory(path);
string filenNamer = file.FileName;
//文件路径
filepath = path + filenNamer;
file.SaveAs(filepath);
return RedirectToAction("Upload", "Home");
}
else
{
//设置上传目录
string path = Server.MapPath("~/UploadFile/File/");
if (!Directory.Exists(path))
Directory.CreateDirectory(path);
//不为图片类型的文件存入到File目录中
string filenNamer = file.FileName;
//文件路径
filepath = path + filenNamer;
file.SaveAs(filepath);
return RedirectToAction("Upload", "Home");
}
}
else
{
var script = String.Format("<script>alert('请选择文件后再上传！');location.href='{0}'</script>", Url.Action("Upload"));
return Content(script, "text/html");
}
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
ASP.NET MVC5实现文件上传与地址变化处理（5）
一.上传文件和重复文件处理 文件处理的原则是:不在数据库中保存文件,只在数据库中保存文件信息(Hash值等).采取文件的MD5重命名文件在一般情况足够处理文件的重复问题,强迫症倾向则可以考虑将MD5和其他摘要算法结合. public static string Save(HttpPostedFileBase file, string path) { var root = "~/Upload/" + path + "/"; var phicyPath = Hostin
-
asp.net mvc 实现文件上传带进度条的思路与方法
前言 文件上传与下载的操作在实际项目中经常是很重要的一个内容,在使用ASP.NET Web Form的时候我们可以使用诸多的服务器控件,FileIpload就是其中之一,但是在ASP.NET不建议使用那些服务器控件,因为那样违反三层架构原则.最近参考网络资料,学习了ASP.NET MVC如何上传文件. 而这篇文章主要重点是asp.net mvc 实现文件上传带进度条,下面来一起看看吧. 实现思路 ajax异步上传文件,且开始上传文件的时候启动轮询来实时获取文件上传进度.保存进度我采用的是memc
-
ASP.NET MVC文件上传教程(二）
上文ASP.NET MVC 文件上传教程(一)我们讲了简单的上传以及需要注意的地方,查相关资料时,感觉上传里面涉及到的内容还是比较多,于是就将上传这一块分为几节来处理,同时后续也会讲到关于做上传时遗漏的C#应该注意的地方,及时进行查漏补缺,尽量将这一块完善起来. 引入 上一节我们讲到了上传这一块,有朋友提出未涉及到大文件的上传这一块,思前想后还是来试着做做,毕竟之前没怎么去仔细考虑过这个问题,尤其还可以联系实际开发中创建文件夹等一系列问题,同时关于上传在网上随便找找都充斥着大量的组件,我们何必再
-
ASP.NET MVC 文件上传教程(一）
这一节我们来讲讲在MVC中如何进行文件的上传,我们逐步深入,一起来看看. Upload File(一) 我们在默认创建的项目中的Home控制器下添加如下: public ActionResult UploadFile() { return View(); } [HttpPost] public ActionResult UploadFile(HttpPostedFileBase file) { var fileName = file.FileName; var filePath = Server
-
用Html5与Asp.net MVC上传多个文件的实现代码
复制代码 代码如下: <form action="/Home/Upload" enctype="multipart/form-data" id="form2" method="post"> <input type="file" name="fileToUpload" id="fileToUpload2" multiple="multiple
-
ASP.NET MVC处理文件上传的小例子
复制代码 代码如下: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Files uploaded to server</h2> <div id="dialog" title="Upload files"> <% using (Html.B
-
ASP.NET MVC HttpPostedFileBase文件上传的实例代码
本文介绍了ASP.NET MVC HttpPostedFileBase文件上传 ,分享给大家,希望对大家有帮助 HttpPostedFileBase文件上传,支持多文件一次上传,如有图片,则支持略缩图保存 文件传输信息封装 /// <summary> /// 文件生成方式 /// </summary> public class UpFileMessage { /// <summary> /// 文件名 /// </summary> public string
-
Asp.net实现MVC处理文件的上传下载功能实例教程
上传于下载功能是程序设计中非常常见的一个功能,在ASP.NET程序开发中有着非常广泛的应用.本文就以实例形式来实现这一功能. 一.概述 如果你仅仅只有Asp.net Web Forms背景转而学习Asp.net MVC的,我想你的第一个经历或许是那些曾经让你的编程变得愉悦无比的服务端控件都驾鹤西去了.FileUpload就是其中一个,而这个控件的缺席给我们带来一些小问题.这篇文章主要说如何在Asp.net MVC中上传文件,然后如何再从服务器中把上传过的文件下载下来. 二.实现方法 1.文件上传
-
asp.net中MVC借助Iframe实现无刷新上传文件实例
本文实例讲述了asp.net中MVC借助Iframe实现无刷新上传文件的方法.分享给大家供大家参考.具体实现方法如下: html: 复制代码 代码如下: <div id="uploadwindow" style="display: none;"> <form action="/ShopActivitys/ImportActivityItems" id="form1" name="form1&
-
ASP.NET MVC4 利用uploadify.js多文件上传
页面代码: 1.引入js和css文件 <link href="~/Scripts/uploadify/uploadify.css" rel="external nofollow" rel="stylesheet" /> <style type="text/css"> #upDiv { width: 550px; height: 400px; border: 2px solid red; margin-t
-
Node.js实现文件上传
在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件, 用nodejs的话, 相当于模拟浏览器的行为. google 了一番之后, 明白了浏览器无非就是利用http协议来给服务器传输数据, 具体协议就是<RFC 1867 - Form-based File Upload in HTML>, 在浏览器上通过form 表单来上传文件就是通过这个协议,我们可以先看看浏览器给服务端发送了什么数据, 就可以依葫芦画瓢的把上传功能实现出来.说起form 表单上传
-
js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的<input type="file">元素,然后使用一个<label>元素来制作美化效果. HTML结构 该文件上传域美化效果最基本的HTML结构如下: <input type="file" name="file" id="file" class=&q
-
JS多文件上传的实例代码
废话不多说了,具体实现代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./jquery-1.9.1.min.js"></script> </head> <body> <fo
-
PHP利用APC模块实现文件上传进度条的方法
本文实例讲述了PHP利用APC模块实现文件上传进度条的方法.分享给大家供大家参考.具体分析如下: 以前的php5.2之前的版本是不能可使用APC模块的,因为之前的压根就没有这个APC模块,如果想使用APC模块实现上传进度条我们必须是php5.2或更高版本. 从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题.并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况. 它的作用原理是在
-
又拍云 Node.js 实现文件上传、删除功能
Node.js 服务端 使用 Node.js + Express.js 实现 服务端 const express = require("express"); const app = express(); const axios = require('axios'); app.set('port', process.env.PORT || 8082); // 静态资源目录,这里放在了根目录,生产环境不允许这样 app.use(express.static(__dirname)); //
-
js 实现文件上传样式详情
目录 1.概述 2.创建对象的参数 3.监听例子 4.使用方法 5.源代码 1.概述 这个js包括按钮样式,列表样式.带有删除.添加.放大(使用的是自带的放大功能,提供有API来放入你的弹窗来进行展示) 可监听的事件 Value wdaasd onlargeClickCallBack 如果想使用自己的弹窗,只需要监听这个函数,拿到返回值给你的弹窗的img->href进行赋值即可 imgFile对象(包括这个被点击图片的全部信息)that(这个js的全局唯一对象,可以在这里面拿到你所有的值) on
-
原生JS实现文件上传
本文实例为大家分享了JS实现文件上传的具体代码,供大家参考,具体内容如下 一.目的: 实现上传图片功能 二.效果: 三.思路: 用input标签自带的上传,先隐藏掉,给上传按钮添加点击事件,绑定input的点击事件 四.代码: //html <input ref="img-upload-input" class="img-upload-input" type="file" accept=".png, .jpg" @cha
-
Vue.js实现文件上传压缩优化处理技巧
目录 vue js实现文件上传压缩优化处理 借助canvas的封装的文件压缩上传 1.新建imgUpload.js 2.全局引入封装的方法 3.页面中使用 使用compressorjs第三方插件实现 1.compressorjs安装 2.方法封装 3.页面使用 4.头像上传处理 vue js实现文件上传压缩优化处理 两种方法 : 第1种是借助canvas的封装的文件压缩上传 第2种(扩展方法)使用compressorjs第三方插件实现 下面来详细介绍两种方法: 借助canvas的封装的文件压缩上
-
利用ajaxfileupload插件实现文件上传无刷新的具体方法
做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://files.jb51.net/file_images/article/201306/js/ajaxfileupload.js) ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件 直接上代码吧