javascript插件uploadify简单实现文件上传
最近在学习mvc,需要用到文件上传的功能,找了很多的jquery插件,最后决定使用uploadify这个插件,参照了各位大神的博客,终于勉勉强强会用了。在此,做一下笔记,方便以后忘了查看。
首先在官网上下载uploadify插件。http://www.uploadify.com/download/
解压后有以下文件:

然后在把下载下来的文件解压到项目文件夹中(只要项目可以引用到就可以了,但还是应该规范一点,养成良好的习惯)。

再然后,就是把uploadify.css和jquery.uploadify.min.js文件引用到页面中(当然还需要引用jquery文件)。

在页面创建一个type为file的input标签(属性name和id可以随便取,但是在做初始化时,就要使用到自己取得name或id值了)。

初始化。uploadify有一些参数需要设置的,我只设置了自己需要的参数,更多参数我参考了博客:http://blog.sina.com.cn/s/blog_5079086b0101fkmh.html

到此前端的文件上传已经完成了,接下来,就是后端如何处理上传文件了。
#region 文件上传+public ActionResult Upload(HttpPostedFileBase fileData)
/// <summary>
/// 文件上传
/// </summary>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(HttpPostedFileBase fileData)
{
if (fileData != null)
{
try
{
// 文件上传后的保存路径(找到自己要上传到的文件夹)
string filePath = Server.MapPath("~/Areas/uploadFile");
if (!Directory.Exists(filePath))
{
Directory.CreateDirectory(filePath);
}
string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
string fileExtension = Path.GetExtension(fileName); // 文件扩展名
string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称
string path = filePath + "\\" + saveName;
fileData.SaveAs(path); return Json(new { Success = true, FileName = fileName, SaveName = saveName });
}
catch (Exception ex)
{
return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
}
}
else
{
return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
}
}
#endregion
到这里文件上传已经完全实现了,具体响应回去的文件上传路径要怎么处理,就看需求了。
//-------更新(以上上传大文件出现http error 500错误)
解决这个错误不是很难,只要三步就可以了。
1.增加属性
'fileSizeLimit': '0',//单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值
2.在web.config中的system.web节点下增加节点
<httpRuntime maxRequestLength="1073741824" executionTimeout="3600" />
3.在system.webServer节点下增加节点
<security>
<requestFiltering>
<!--修改服务器允许最大长度-->
<requestLimits maxAllowedContentLength="1073741824"/>
</requestFiltering>
</security>
javascript插件uploadify简单实现文件上传的更多相关文章
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- jQuery插件AjaxFileUpload实现ajax文件上传时老是运行error方法 问题原因
今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是运行error.无法运行succes方法,追踪ajaxfileupload.js源代码发现: wa ...
- 使用jsp/servlet简单实现文件上传与下载
使用JSP/Servlet简单实现文件上传与下载 通过学习黑马jsp教学视频,我学会了使用jsp与servlet简单地实现web的文件的上传与下载,首先感谢黑马.好了,下面来简单了解如何通过使用 ...
- WordPress Complete Gallery Manager插件‘upload-images.php’任意文件上传漏洞
漏洞名称: WordPress Complete Gallery Manager插件‘upload-images.php’任意文件上传漏洞 CNNVD编号: CNNVD-201309-377 发布时间 ...
- Django 实现简单的文件上传
今天分享一下Django实现的简单的文件上传的小例子. 步骤 创建Django项目,创建Django应用 设计模型 处理urls.py 以及views.py 设计模板,设计表单 运行项目,查看数据库 ...
- DVWA靶机--简单的文件上传漏洞
简单的文件上传漏洞(靶机安全级别:low) 事先准备好一句话木马,密码为pass 上传一句话木马,显示上传路径(一般网站是不会显示路径的,这里靶机为了方便你测试漏洞,直接显示出了路径: ../../h ...
- Java实现一个简单的文件上传案例
Java实现一个简单的文件上传案例 实现流程: 1.客户端从硬盘读取文件数据到程序中 2.客户端输出流,写出文件到服务端 3.服务端输出流,读取文件数据到服务端中 4.输出流,写出文件数据到服务器硬盘 ...
- javascript实现简单多文件上传
该上传功能主要用到html5新属性FormData,通过XMLHttpRequest对象send到服务器,支持文件多选和多次选择.文件去重.移除已选文件等 1.html代码 <div class ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
随机推荐
- ffmpeg,X264编码结果I帧QP比P帧还大
enc_ctx->profile =FF_PROFILE_H264_MAIN ; enc_ctx->time_base.den = 24; enc_ctx->time_base.nu ...
- python网络编程socket之多进程
#coding:utf-8 __author__ = 'similarface' import os,socket,threading,SocketServer SERVER_HOST='localh ...
- --tags --follow-tags 的区别
--tags All refs under refs/tags are pushed, in addition to refspecs explicitly listed on the comm ...
- mysql数据库回滚
在应用$mysqli时,因没常用到数据回滚,老忘,整理下,做个记录. $mysqli->autocommit(FALSE);//自动提交设置关闭 $mysqli->query(" ...
- 最牛B的编码套路(转)
转自:http://blog.csdn.net/happydeer/article/details/17023229 最近,我大量阅读了Steve Yegge的文章.其中有一篇叫"Pract ...
- stdcall与cdecl的区别
1 区别 VC++的C/C++函数有两种基本的调用约定:__stdcall.__cdecl.它们有什么区别呢?请参考下表: __stdcall __cdecl 函数代码 C int __std ...
- jQuery图片延迟加载插件jQuery.lazyload使用方法(转)
使用方法 1.引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></scri ...
- nodeschool.io 8
~~ HTTP COLLECT ~~ Write a program that performs an HTTP GET request to a URL provided toyou as the ...
- Java 之 I/O 系列 02 ——序列化(二)
Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 继续上篇的第二个问 ...
- ERP开发分享 1 数据库表设计
这是我的ERP设计经验分享系列,今天讲的是数据库的表设计(1),主要阐述: 1.单字段的主键:2.使用int32作为主键类型:3.使用版本字段处理乐观锁定:4.生效字段标明是否允许“被使用”:5.锁定 ...