上传系列:ajaxupload.js
ajaxupload.js
上次说了jquery.upload.js,这次再说一下ajaxupload.js,这个其实也比较简答,只有一个JS文件:
html代码:
$(function () {
var btnUpload = $('#upload');
new AjaxUpload(btnUpload, {
action: '/System/Upload', //上传地址
name: 'uploadfile', //文件域名字
onSubmit: function (file, ext) { //上传之前的操作
if (!(ext && /^(jpg|gif|jpeg|png)$/.test(ext))) {
$.messager.alert('提示', '亲,请选择jpg、png、gif、jpeg图片!');
return false;
}
var ele = $(".imglist li");
if (ele.length >= 5) {
$.messager.alert('提示', '亲,最多上传五张图片!');
return false;
}
},
onComplete: function (file, response) { //上传完毕后的操作(response服务器返回的信息)
var html = '<li><span><img src="' + response + '"/><p>';
if ($(".imglist").find('li').length > 0) {
html += '<input type="radio" name="img" value="' + response + '" />';
} else {
html += '<input type="radio" name="img" value="' + response + '" checked="checked" />';
}
html += '<a href="javascript:void(0)" onclick="defimg(this)">主图</a>|<a href="javascript:void(0)" onclick="delimg(this)">删除</a>';
html += '</p></span></li>';
$('.imglist').append(html);
}
});
});
后台代码和jquery.upload.js的差不多,但是有一点需要注意,这个ajaxupload.js在后台接受文件的时候,比如后台方法:
public ActionResult Upload(HttpPostedFileBase FileData)
{ }
MVC不会直映射到,所以比较坑人的地方出现了,我们需要通过代码,再获取上传文件
public ActionResult Upload(HttpPostedFileBase FileData)
{
FileData = Request.Files["uploadfile"];
}
上传系列:ajaxupload.js的更多相关文章
- 上传系列:jquery.upload.js
最近想做一个上传的总结,把自己用过的上传插件都写一写,哪天用到的时候就不用再一次的翻阅资料,现在页面上用到的上传插件,原理上都差不多,那我也就不再废话了,下面我主要记录一下几个比较常用的,由简到繁,这 ...
- 另一种图片上传 jquery.fileupload.js
今天遇到另外一种上传图片方法 用jquery.fileupload.js <input type="file" name="file[]" multipl ...
- 图片上传插件用法,JS语法【三】
注意点: 作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的.如:正确的写法是<inp ...
- ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义
百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...
- OSS阿里云上传文件 前端js下载url跨域问题
场景: 1.后端上传文件至阿里云OSS,返回得到一个URL. 2.前端用这个URL下载文件,ajax请求异常:No 'Access-Control-Allow-Origin' header is pr ...
- 文件上传:swfupload.js、blueimp-file-upload
一.swfupload 1.下载swfupload http://code.google.com/p/swfupload/ 2. 3.API http://www.cnblogs.com/henw/ ...
- C# asp:FileUpload上传文件使用JS实现预览效果
js代码: <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview() { va ...
- 上传插件dropzone.js实例
dropzone.js默认是Ajax上传图片给服务器,那么如何获取到图片名呢?其实我们是可以通过dropzone的success函数获取到服务器返回的数据 dropzone.js在HTML的配置如下: ...
- Java网站开发的一些问题以及解决(cookie消失,上传头像,js等)
1.首先是cookie的问题,很多人都是遇到了将数据存储到cookie中并且add到response之中,但是还有返回其他页面或者刷新页面cookie消失的情况,除了设置cookie的存活时间外, 还 ...
随机推荐
- Map 排序
/** * 通过map 的 value 排序,并返回排序后的第一个条目 * * @param m 待排序集合 * @param desc true:降序排序,false:升序排序 * @return ...
- 来自JavaScript Garden摘取
1.数字类型不能用作对象,因为javascript解析器会将点号(.)解析成浮点型(as a floating point literal),比如:2.toString();会导致语法从错误,解决方法 ...
- jsp验证码点击刷新
<img src="<%=basePath%>manage/code" alt="验证码" height="20" ali ...
- PostgreSQL的 initdb 源代码分析之十六
继续分析 setup_description(); 展开后: 就是要把 share/postgres.description 文件的内容读入到 pg_description 和 pg_shdescri ...
- BW性能优化
少写例程,减少ABAP处理时间,例程要有效率减少查询数据库表先加载主数据,然后加载事务数据创建聚集进行数据压缩M:N关系的数据不能放到一个维度减少计算指标数量,提高上载效率并行加载建模型时如果有日的分 ...
- Codeforces Gym 100523C C - Will It Stop? 水题
C - Will It Stop?Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/ ...
- cocos2d-x 3.0环境搭建
原文来自于:http://blog.csdn.net/linzhengqun/article/details/21663341 安装工具 1. 配置JDK JDK下载地址:http://www.ora ...
- C#制作一个消息拦截器(intercept)1
首先,我们先要制作一个自己定义Attribute,让他能够具有上下文读取功能,所以我们这个Attribute类要同一时候继承Attribute和IContextAttribute. 接口IContex ...
- iOS开发——图形编程OC篇&粘性动画以及果冻效果
粘性动画以及果冻效果 在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲 ...
- 高级I/O之存储映射I/O
存储映射I/O(Memory-mapped I/O)使一个磁盘文件与存储空间中的一个缓冲区相映射.于是当从缓冲区中取数据,就相当于读文件中的相应字节.与此类似,将数据存入缓冲区,则相应字节就自动地写入 ...