ASP.NET MVC Webuploader实现上传功能
更新时间:2021年9月22日 10:02 点击:1578
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下
1.简介:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
2.引入资源:使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。
<!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script> <!--SWF在初始化的时候指定,在后面将展示-->
3.HTML部分
<div id="uploader" class="wu-example"> <!--用来存放文件信息--> <ul id="thelist" class="list-group"></ul> <div class="uploader-list"></div> <div class="btns"> <div id="picker" style="float:left;">选择文件</div> <input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" style="width:78px;height:37px;margin-left:10px;" /> </div> </div>
4.JS部分
//初始化上传控件 function initUpload() { var $ = jQuery; var $list = $('#thelist'); var uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: false, // swf文件路径 swf: applicationPath + '../Content/scripts/plugins/webuploader/Uploader.swf', // 文件接收服务端。 server: applicationPath + 'PublicInfoManage/Upload/Upload', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker', chunked: true,//开始分片上传 chunkSize: 2048000,//每一片的大小 formData: { guid: GUID //自定义参数,待会儿解释 }, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false }); // 当有文件被添加进队列的时候 uploader.on('fileQueued', function (file) { $list.append('<li id="' + file.id + '" class="list-group-item">' + '<span class="fileName" dataValue="">' + file.name + '</span>' + '<span class="state" style=\" margin-left: 10px;\">等待上传</span>' + '<span class="filepath" dataValue="0" style=\" margin-left: 10px;display: none;\"></span>' + '<span class="download" style="margin-left:20px;"></span>' + '<span class="webuploadDelbtn"style=\"float: right;display: none; \">删除<span>' + '</li>'); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if (!$percent.length) { $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } $li.find('span.state').text('上传中'); $percent.css('width', percentage * 100 + '%'); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function (file, response) { var $li = $('#' + file.id); //$('#' + file.id).find('p.state').text('已上传'); $.post('../../PublicInfoManage/Upload/Merge', { guid: GUID, fileName: file.name }, function (data) { $li.find('span.state').html("上传成功"); $li.find('span.filepath').attr("dataValue", 1); $li.find('span.fileName').attr("dataValue", data.filename); $li.find('span.fileName').html(data.filename); $li.find('span.download').html("<a href=\"../../PublicInfoManage/Upload/DownFile?filePath=" + data.filepath + "&fileName=" + data.filename + "\">下载</a>") $li.find('span.webuploadDelbtn').show(); $li.find('span.filepath').html(data.filepath); //增加列表存储 files.push(data); }); }); // 文件上传失败,显示上传出错。 uploader.on('uploadError', function (file, reason) { $('#' + file.id).find('p.state').text(reason); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); }); //所有文件上传完毕 uploader.on("uploadFinished", function () { //提交表单 }); //开始上传 $("#ctlBtn").click(function () { uploader.upload(); }); //删除 $list.on("click", ".webuploadDelbtn", function () { debugger var $ele = $(this); var id = $ele.parent().attr("id"); var file = uploader.getFile(id); uploader.removeFile(file); $ele.parent().remove(); //移除数组 var destFile = findFile(file.name) var index = files.indexOf(destFile); if (index > -1) { files.splice(index, 1); } }); }
5.C# Controller后台处理
/// <summary> /// 上传文件 /// </summary> /// <returns></returns> [HttpPost] public ActionResult Upload() { string fileName = Request["name"]; int lastIndex = fileName.LastIndexOf('.'); string fileRelName = lastIndex == -1? fileName: fileName.Substring(0, fileName.LastIndexOf('.')); fileRelName = fileRelName.Replace("[", "").Replace("]", "").Replace("{", "").Replace("}", "").Replace(",", ""); int index = Convert.ToInt32(Request["chunk"]);//当前分块序号 var guid = Request["guid"];//前端传来的GUID号 var dir = Server.MapPath("~/Upload/file");//文件上传目录 string currentTime = DateTime.Now.ToString("yyyy-MM-dd"); dir += "\\" + currentTime; dir = Path.Combine(dir, fileRelName);//临时保存分块的目录 if (!System.IO.Directory.Exists(dir)) System.IO.Directory.CreateDirectory(dir); string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名,更严谨一些可以加上是否存在的判断,防止多线程时并发冲突 var data = Request.Files["file"];//表单中取得分块文件 //if (data != null)//为null可能是暂停的那一瞬间 //{ data.SaveAs(filePath);//报错 //} return Json(new { erron = 0 });//Demo,随便返回了个值,请勿参考 }
6.实现效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
- 本案例非通用,仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
- 这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15
借助FileReader实现将文件编码为Base64后通过AJAX上传
这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25- APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
C# MVC模式中应该怎样区分应用程序逻辑(Controller层)和业务逻辑(Model层)?
这篇文章主要介绍了C# MVC模式中应该怎样区分应用程序逻辑(Controller层)和业务逻辑(Model层)?,这也小编做.NET项目时经常思考和让人混乱的一个问题,这篇文章写的挺好,一下清晰了许多,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- 这篇文章主要介绍了smartupload实现文件上传时获取表单数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2017-01-09
- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25