MVC上传多张图片
改变上传文件的按钮样式:
<div id="post-upload-image">
<div id="divfile_-1">
<input id="file_-1" type="file" name="file" style="display:none;" onchange="selectImage('file_-1')" /> <label for="file_-1" style="font-weight:normal; cursor:pointer;" class="publish-space-form-img text-center publish-add-img">
<i class="glyphicon glyphicon-plus"></i>
<br />插入图片
</label>
</div>
</div>
MVC中选择图片:有多少个<input type="flie" />控制器中通过Request.Form.Files就会接受到多少张图片。
function selectImage(id) {
var fileInput = document.getElementById(id);
var file = fileInput.files[0];
if (fileInput.files && file) {
imageI += 1;
var reader = new FileReader();
reader.onload = function (e) {
$("<div class='publish-post-image'>" +
"<div class='publish-space-form-img text-center publish-div-shadow' style='display:none;'>" +
"<i class='glyphicon glyphicon-trash'></i>" +
"</div>" +
"<img src='" + e.target.result + "' class='publish-space-form-img' id='image_" + imageI + " '/>" +
"</div>"
).appendTo('#post-images'); var selectIdName = '#divfile_' + (imageI - 1);
$(selectIdName).hide(); $("<div id='divfile_" + imageI + "'>" +
"<input id='file_" + imageI + "' type='file' name='file' style='display:none;' onchange=" + "selectImage('file_" + imageI + "') />" +
"<label for='file_" + imageI + "'style='font-weight:normal; cursor:pointer;' class='publish-space-form-img text-center publish-add-img'><i class='glyphicon glyphicon-plus'></i><br />插入图片</label>" +
"</div>").appendTo("#post-upload-image");
} reader.readAsDataURL(file);
}
}
MVC上传多张图片的更多相关文章
- Asp.net mvc上传多张图片后台存储
前台页面通过<file name="img">标签数组上传图片,后台根据Request.Files["img"]来接收前台上传的图片. 1 Syst ...
- Spring MVC上传文件
Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...
- MVC上传文件
ASP.NET MVC上传文件是必段撑握的知识.加强训练才是.以前Insus.NET曾使用第三方MyAjaxForm.js :http://www.cnblogs.com/insus/p/378548 ...
- iOS -- 上传多张图片 后台(PHP)代码和上传一张的一样
// 上传多张图片 - (void)send { // 设置初始记录量为0 self.count = 0; self.upcount = 0; // 设置初始值为NO self.isUploadPic ...
- Spring MVC 上传文件
Spring MVC上传文件需要如下步骤: 1.前台页面,form属性 method设置为post,enctype="multipart/form-data" input的typ ...
- php用jquery-ajax上传多张图片限制图片大小
php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...
- MVC:上传文件
今天写了一个使用MVC上传的DEMO,很简单不超过10行代码.代码如下(关注重点,所以尽量精简掉其他代码): 项目结构
- 微信JSSDK上传多张图片
之前是使用for循环实现的,但是安卓手机没有问题,苹果手机只能上传最后一张图片. 好在有高手在前面趟路,实用的循环调用.苹果是没有,安卓不清楚.以下内容转自:http://leo108.com/pid ...
- asp.net mvc上传头像加剪裁功能
原文:asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jqu ...
随机推荐
- ios 的版本记录
NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary]; CFShow(infoDictionary); // ap ...
- 喵星球上的点名(bzoj 2754)
Description a180285幸运地被选做了地球到喵星球的留学生.他发现喵星人在上课前的点名现象非常有趣. 假设课堂上有N个喵星人,每个喵星人的名字由姓和名构成.喵星球上的老师会选择M个串 ...
- 解决使用webbrowser请求url时数据传递丢失问题
问题: 使用“ this.webBrowser.Url = new Uri(webBrowserUrl);”方式请求Action(Java Web)并传递数据,在webBrowserUrl中携带的参数 ...
- polyfill for Function--源码
/** * polyfill for Function */ // from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refer ...
- Linux 之 FTP服务器搭建
FTP服务器搭建 参考教程:[千峰教育] 1.关闭防火墙: service iptables stop 2.关闭Selinux setenforce 0 3.安装所需要依赖及编译工具 yum inst ...
- 客户端负载均衡Ribbon之源码解析
什么是负载均衡器? 假设有一个分布式系统,该系统由在不同计算机上运行的许多服务组成.但是,当用户数量很大时,通常会为服务创建多个副本.每个副本都在另一台计算机上运行.此时,出现 "Load ...
- FreeSql 教程引导
FreeSql是一个功能强大的NETStandard库,用于对象关系映射程序(O/RM),以便于开发人员能够使用 .NETStandard 对象来处理数据库,不必经常编写大部分数据访问代码. 特性 支 ...
- Xamarin XAML语言教程使用Visual Studio创建XAML
Xamarin XAML语言教程使用Visual Studio创建XAML Xamarin.Forms允许开发人员通过XAML语法对程序的所有用户界面元素进行详细的定制,如文本.按钮.图像和列表框等. ...
- Endless Pallet(min-max容斥)
地址:传送门 分析: 设$x_i$表示第i个点被染成黑色的时间,所求即为$E(max \left \{x_i \right \})$ 因为$E(X)=\sum_{k=1}^{\infty}i \ti ...
- 【原】手写spring async异步组件
最近在工作中使用到了spring自带的Async,主要是为了把其中耗时多.响应慢.计算复杂的业务抽取几个模块出来,并行查询.不得不说spring自带的比传统线程池提交在代码层次上看起来优雅简洁了不少 ...