改变上传文件的按钮样式:

<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上传多张图片的更多相关文章

  1. Asp.net mvc上传多张图片后台存储

    前台页面通过<file name="img">标签数组上传图片,后台根据Request.Files["img"]来接收前台上传的图片. 1 Syst ...

  2. Spring MVC上传文件

    Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...

  3. MVC上传文件

    ASP.NET MVC上传文件是必段撑握的知识.加强训练才是.以前Insus.NET曾使用第三方MyAjaxForm.js :http://www.cnblogs.com/insus/p/378548 ...

  4. iOS -- 上传多张图片 后台(PHP)代码和上传一张的一样

    // 上传多张图片 - (void)send { // 设置初始记录量为0 self.count = 0; self.upcount = 0; // 设置初始值为NO self.isUploadPic ...

  5. Spring MVC 上传文件

    Spring MVC上传文件需要如下步骤: 1.前台页面,form属性 method设置为post,enctype="multipart/form-data"  input的typ ...

  6. php用jquery-ajax上传多张图片限制图片大小

    php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...

  7. MVC:上传文件

    今天写了一个使用MVC上传的DEMO,很简单不超过10行代码.代码如下(关注重点,所以尽量精简掉其他代码): 项目结构

  8. 微信JSSDK上传多张图片

    之前是使用for循环实现的,但是安卓手机没有问题,苹果手机只能上传最后一张图片. 好在有高手在前面趟路,实用的循环调用.苹果是没有,安卓不清楚.以下内容转自:http://leo108.com/pid ...

  9. asp.net mvc上传头像加剪裁功能

    原文:asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jqu ...

随机推荐

  1. HUST——1103Party(拓扑排序+个人见解)

    1103: Party Time Limit: 2 Sec  Memory Limit: 64 MB Submit: 11  Solved: 7 Description N students were ...

  2. docker (centOS 7) 使用笔记3 - 修改docker默认的虚拟网址

    近日在使用VPN时发现和docker的虚拟网址发生了冲突,都是172.17.0.1,故需要修改docker的默认网址. 1. 当前状态 # ifconfig docker0: flags=<UP ...

  3. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---0

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下: <Linux命令行与shell脚本 ...

  4. Android系统默认语言改为中文

    第一种方法: 修改 build/tools/buildinfo.sh echo "ro.product.locale.language=zh"echo "ro.produ ...

  5. phpcms V9 广告模块中广告模板修改

    广告模块模板位置 \phpcms\modules\poster\install\templates\*.html 我的需求: 去掉边框控制代码,是否显示边框我将在页面模板中设置,因些需要删除模板中的以 ...

  6. hdu 1099(数学)

    Lottery Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  7. 机器学习实战读书笔记(五)Logistic回归

    Logistic回归的一般过程 1.收集数据:采用任意方法收集 2.准备数据:由于需要进行距离计算,因此要求数据类型为数值型.另外,结构化数据格式则最佳 3.分析数据:采用任意方法对数据进行分析 4. ...

  8. 1076. Wifi密码 (15)【模拟】

    1076. Wifi密码 (15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 下面是微博上流传的一张照片:“ ...

  9. UVA 10635 Prince and Princess【LCS 问题转换为 LIS】

    题目链接: http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=19051 题意: 有两个长度分别为p+1和q+1的由1到n2 ...

  10. Unity3d Inspector面板实现set/get访问器

    简单说一下属性和字段的区别:字段就是成员变量,而属性确实提供给外部访问内部成员变量的接口.之所以会有属性的出现,就是为了避免外部对类的成员的直接访问,通俗的说就是OOP中的封装思想. using Un ...