有这么一个需求，一个form有多个文件要上传，但又不是传统的图片批量上传那种，是类似下图这种需求，一开始是用的swfupload做的上传，但是问题是如果有多个按钮的话，就要写很多重复的代码，于为了代码的简洁所以就开始寻求其他的方法，期间试过uploadify，但是由于样式始终调不出来，最后就放弃了，直到发现这么个小巧的玩意，jQuery File Upload。
本文包含了upload的js实现，html的分析，CSS的实现等内容，文章末尾有git地址
官网下载的demo有N多js文件，一大堆js文件中只有几个才是必要的，其他的文件都是一些用不到的功能，只有在你需要的时候才需要引用。
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script src="JS/jquery/jquery.iframe-transport.js"></script> <script src="JS/jquery/jquery.ui.widget.js"></script> <script src="JS/jquery/jquery.xdr-transport.js"></script> <script src="JS/jquery/jquery.fileupload.js"></script>
其中iframe那个文件是为了进行iframe上传，ui文件是能选完文件自动上传的必要文件，xdr那个是在ie下才需要的，最后一个文件是主体
新建一个ashx的文件，这里建立一个uploadHandler.ashx，然后写入如下代码，用于保存。
public void PRocessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["files"]; string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "//"; if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(uploadPath + file.FileName); //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失 string newName = file.FileName; string oldName = file.FileName; context.Response.Write("{/"newName/": /"" + newName + "/", /"oldName/": /"" + oldName + "/"}"); } else { context.Response.Write("0"); } }
最终的效果如上图所示，为了实现这个我们一步一步来分析。
如上图
上图后4个div按照顺序写在最外层里面，然后考虑通过浮动来解决位置的问题，当然也可以用绝对定位等方法来实现，这里选择了浮动。
因为要用到浮动，这里简单解释一下浮动的原理
首先设置0的宽度是280px
所以1的宽度就是70+margin-right:8 右侧还有202宽度，左浮动
2的宽度是150px，左浮动
3的宽度不设置，右浮动
4的宽度是200+border:2 一共202宽度，左浮动
然后再设置上传按钮，如果不设置样式，上传按钮是这样的
这样显然是老套的样式了，在网上找了一个解决方案是这样的
配合这样的样式
就可以做出这个效果了
所以html的代码如下：
<style>body{padding:10px}/* 上传控件 */.upload{ margin-top:10px; width:280px; height:30px;}.upload .uploadbtnBox{ float:left; height:30px; width:70px; margin-right:8px;}.upload .progress{ height:4px; line-height:4px; *zoom:1; background:#fff; float:left; width:200px; border:1px #ccc solid; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:none;}.upload .filestate{ float:left; height:20px; text-align:left; width:150px; line-height:20px; display:none; color:#333; overflow:hidden;}.upload .progresspercent{ float:right; padding-top:5px; height:15px; text-align:right; font-size:9px; line-height:15px; color:#333;}.upload .uploadbtnBox .a-upload { height:28px; background:#4090c0; border:1px solid #dddddd;color:#ffffff; line-height:28px; padding:0 6px; font-size:0.9em; overflow: hidden; display: inline-block; text-decoration:none; *display: inline; *zoom: 1}.upload .uploadbtnBox .a-upload input { position: absolute; width:70px; height:30px; overflow:hidden; margin-left:-10px; opacity: 0; filter: alpha(opacity=0); cursor: pointer}.upload .progress .bar{ height:4px; line-height:4px; background:#4090c0; *zoom:1; }.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both;}.clearfix { _zoom: 1;}.clearfix {*zoom:1;} </style><div class="upload clearfix"> <div class="uploadbtnBox clearfix"> <a href="Javascript:;" class="a-upload"> <input type="file" data-url="uploadHandler.ashx" name="files" value="" id="file7" onchange="CheckFile(this)" />点击上传 </a> </div> <div class="filestate"> 文件名</div> <div class="progresspercent"> </div> <div class="progress" style="height: 4px;"> <div class="bar" style="width: 0%;"> </div> </div> </div>
新闻热点
疑难解答
