http://www.zhangxinxu.com/wordpress/?p=1923 基于HTML5的可预览多图片Ajax上传 2015-10-19
<input id="fileImage" type="file" size="30" name="fileselect[]" multiple />
下面是以前的
<div class="form-line"> <!-- 文件上传按钮 --> <input id="img1" name="img1" type="file" class="btn-file-hidden" onchange="file_text1.innerHTML=this.value"/> <label for="img1" class="btn-24 w76 btn-color-blue l">浏览</label> <label for="img1" class="input-26 w370 l" id="file_text1"/></label> <a href="javascript:;" class="btn-24 w64 btn-color-blue r">上传</a> <!-- 文件上传按钮,end --> </div>
<!-- 这种写法不好 -->
<div class="form-line"> <div class="btn-file-box l"> <a href="javascript:;" class="btn-24 w76 btn-color-blue l" style="display:block;">浏览</a><input type="text" id="file_text3" name="" class="input-26 w370 l"/> <input type="file" name="" onchange="file_text3.value=this.value" class="btn-file" /> </div> <a href="javascript:;" class="btn-24 w64 btn-color-blue r">上传</a> <div style="clear:both;"></div> </div> <style> .pg-fillin .form-line{vertical-align: middle;font-size: 14px;min-height:24px;line-height:24px;margin:0px 0px 26px 0px;text-align:left; white-space:nowrap;} </style>
/********************[2.1本站样式,按钮库]*********************/ .btn-color-gray{color:#333;background:#f3f3f3;border:1px solid #c7c7c7;} .btn-color-blue{color:#FFF;background:#4096ee;border:1px solid #1c6cbe;} .btn-color-white{color:#a8a8a8;background:#f8f8f8;border:1px solid #dddddd;} .btn-color-red{color:#FFF;background:#990033;border:1px solid #710127;} .btn-24{height:24px;line-height:24px;font-size:14px;font-family:'宋体';text-align:center;text-decoration: none;display:inline-block;} .btn-40{height:40px;line-height:40px;font-size:16px;font-family:'microsoft yahei';text-align:center;text-decoration: none;display:inline-block;} .btn-42{height:42px;line-height:42px;font-size:18px;font-family:'microsoft yahei';text-align:center;text-decoration: none;display:inline-block;} .btn-file{position:absolute;overflow:hidden;right:0px;font-size:200px;width:100%;height:100%;margin:0px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;} .btn-file-box{position:relative;white-space:nowrap;overflow:hidden;display:inline-block;} .btn-file-hidden{display:none;} .input-30{height:30px;padding:1px 1px 1px 5px;border:1px solid #ccc;} .input-26{height:22px;padding:1px 1px 1px 5px;border:1px solid #ccc;}