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的更多相关文章

  1. 上传系列:jquery.upload.js

    最近想做一个上传的总结,把自己用过的上传插件都写一写,哪天用到的时候就不用再一次的翻阅资料,现在页面上用到的上传插件,原理上都差不多,那我也就不再废话了,下面我主要记录一下几个比较常用的,由简到繁,这 ...

  2. 另一种图片上传 jquery.fileupload.js

    今天遇到另外一种上传图片方法 用jquery.fileupload.js <input type="file" name="file[]" multipl ...

  3. 图片上传插件用法,JS语法【三】

    注意点: 作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的.如:正确的写法是<inp ...

  4. ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义

    百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...

  5. OSS阿里云上传文件 前端js下载url跨域问题

    场景: 1.后端上传文件至阿里云OSS,返回得到一个URL. 2.前端用这个URL下载文件,ajax请求异常:No 'Access-Control-Allow-Origin' header is pr ...

  6. 文件上传:swfupload.js、blueimp-file-upload

    一.swfupload 1.下载swfupload http://code.google.com/p/swfupload/ 2. 3.API  http://www.cnblogs.com/henw/ ...

  7. C# asp:FileUpload上传文件使用JS实现预览效果

    js代码: <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview() { va ...

  8. 上传插件dropzone.js实例

    dropzone.js默认是Ajax上传图片给服务器,那么如何获取到图片名呢?其实我们是可以通过dropzone的success函数获取到服务器返回的数据 dropzone.js在HTML的配置如下: ...

  9. Java网站开发的一些问题以及解决(cookie消失,上传头像,js等)

    1.首先是cookie的问题,很多人都是遇到了将数据存储到cookie中并且add到response之中,但是还有返回其他页面或者刷新页面cookie消失的情况,除了设置cookie的存活时间外, 还 ...

随机推荐

  1. CSS3之背景剪裁Background-clip

    CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...

  2. android使用mount挂载/system/app为读写权限,删除或替换系统应用

    注意:以下代码中#开头的则为需要执行的shell命令,其他的为打印的结果.#代表需要使用ROOT权限(su)执行,所以想要修改您android手机某个目录挂载为读写,首先需要有ROOT权限! 先要得到 ...

  3. ios8,xcode6 周边

    NSBundle.mainBundle().infoDictionary iOS 8中带按钮的推送代码 ") ){ application.registerForRemoteNotifica ...

  4. xcode7.3 iTunes Store operation failed问题

    升级了7.3,真心的不好用啊,bug一堆,写个代码,引入的类根本找不到,必须要command+b 重新编译一遍,现在连提交appstore都有问题. 果断用了 Application Loader上传 ...

  5. Codeforces Round #333 (Div. 1) B. Lipshitz Sequence 倍增 二分

    B. Lipshitz Sequence Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/601/ ...

  6. Linux下进程的同步相互排斥实例——生产者消费者

    linux下的同步和相互排斥 Linux sync_mutex 看的更舒服点的版本号= = https://github.com/Svtter/MyBlog/blob/master/Linux/pth ...

  7. hdu4864 hdu4268 贪心 lower_bound

    hdu4864 题意: 有n个机器,m个任务,n,m<=100000,每个机器都有工作时间的最大限制xi(0<xi<1440)和完成的最大难度yi(0<=yi<=100) ...

  8. js实现自己定义鼠标右键-------Day45

    又是周末了,只是事实上这在国外应该算是一周的開始吧,无论怎么说,今天是在歇息,放松我紧绷的神经,放松我有些疲惫的精神,昨晚上要裂了般的头疼,仿佛全部的数据都在脑子字面飞舞旋转,伴着一阵阵的恶心,当时把 ...

  9. 实时数据采集传输软件LDM配置

    本环境一共两个机器:cma.ldm87.gov.cn(hostname)机器作为upstream LDM,cma.ldm84.gov.cn(hostname)机器作为downstream LDM.下面 ...

  10. 如何将一个 ASP.NET MVC 4 和 Web API 项目升级到 ASP.NET MVC 5 和 Web API 2

    ----转自微软官网www.asp.net/mvc/ ASP.NET MVC 5 和 Web API 2 带来的新功能,包括属性路由. 身份验证筛选器,以及更多的主机.请参阅http://www.as ...