图片上传

<div class="upload">

<span class="refundFont">上传凭证</span>

<div class="uploadImg">

<!-- 用来存放图片的-->

<div id="imgBox" class="l"></div>

<div class="upImg l">

<input type="file" title="请选择图片" id="file" class="input_img" multiple="" accept="image/png,image/jpg,image/gif,image/JPEG" />

<div class="posinfo">

<img class="upImgs" src="img/camera.png">

<span class="upfont">上传凭证 (最多3张)</span>

</div>

</div>

</div>

</div>

</div>

css

*{ padding: 0; margin: 0; }

body{ font:.24rem/.6rem "微软雅黑" ; }

.l{ float: left; }

.upload{ background: #fff; margin-top: .15rem; padding-bottom: .3rem; }

.uploadImg{ padding-left: .2rem; }

.upImg{ text-align: center; width: 1.2rem; height: 1.2rem; border: 1px dashed #eee; position: relative; z-index: 0; }

.posinfo{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center; z-index: 2; }

.upImgs{ width: .36rem; height: .34rem; margin-top:.2rem ; }

.upfont{ display: block; font: .14rem/.16rem "微软雅黑"; color: #acacac; text-align: center; }

.number{ border: 1px solid #c8c8c8; width: 80px; overflow: hidden; text-align:center ; margin: .24rem .2rem 0 0 ; }

.cutDown,.addUp{ width: 25%; font-size: 16px; color: #888; height: 20px; line-height: 20px; }

.counting{ width: 50%; overflow: hidden; text-align: center; height: 20px; white-space: nowrap; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; color: #101010; box-sizing: border-box; line-height: 20px; } .goodsNumFont{ padding: .14rem 0 .1rem .2rem; }

.numMoreFont{ font: 10px/14px "微软雅黑"; color: #f70; }

.goodsFont{ display: block; color: #333; font: 14px/20px "微软雅黑"; }

.input_img{ width: 1.2rem; height: 1.2rem; opacity: 0; cursor: pointer; position: absolute; top: 0; left: 0; z-index: 10; }

#imgBox { text-align: left; min-width: 1.2rem; height: 1.2rem; display: none; }

.imgContainer { display: inline-block; width: 1.2rem; height: 1.2rem; position: relative; box-sizing: border-box; margin: 0 .1rem; }

.imgContainer:last-child{ margin-right:.2rem ; }

.imgContainer img { width: 1.2rem; height: 1.2rem; cursor: pointer; }

.imgContainer img.close{ width: .26rem; height: .26rem; top: -.1rem; right: -.1rem; position: absolute; z-index: 20; }

js

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

< script  type="text/javascript">

//设置rem

var width=document.documentElement.clientWidth; document.documentElement.style.fontSize=document.documentElement.clientWidth/6.4+"px"; window.addEventListener("resize",function(){ document.documentElement.style.fontSize=document.documentElement.clientWidth/6.4+"px"; if(width != document.documentElement.clientWidth) { window.location.reload(); } if(document.documentElement.clientWidth>640){ document.documentElement.style.fontSize="100px" } });

//pulgin方法

var PLUGIN = { /** * @param {Object} imgname 所要传输的input name * @param {Object} img 所要传输的图片数据 * @param {Object} url 传输地址 * @param {Object} fun 回调执行方法 */ imgRequest: function(imgname, img, url, fun) { var data = { imgData:img,//图片数据 imgName:imgname,//传输名 url:url||"http://mall.ptb2b.com/inc/ajax.ashx?action=uploadify__upload",//传输地址 response:fun||""//连接方法 } //根据传入值修改方法 if(arguments.length == 2) { if(typeof(img) == "function") { data.response = img; } if(!imgname[0].type.match(/image\/.*/i)) { alert("请选择图片") return; } else { data.imgName = "Filedata"; data.imgData = imgname[0]; } } var reader = new FormData(); reader.append(data.imgName, data.imgData); var httprequest = new XMLHttpRequest(); httprequest.open("POST", data.url); httprequest.send(reader) httprequest.onload = function(msg) { data.response(JSON.parse(httprequest.response)); } } }

//图片上传工作

$(".input_img").bind("change",function(e){ var ireg = /image\/.*/i; var files = e.target.files || e.dataTransfer.files; if(!files[0].type.match(ireg)) { alert("请选择图片") return; } else { PLUGIN.imgRequest("Filedata", files[0], "http://mall.ptb2b.com/inc/ajax.ashx?action=uploadify__upload", function(data) { $("#imgBox").show() var s=$("#imgBox").html() s+='' $("#imgBox").html(s) var len=$(".imgContainer").length if(len>=3){ $(".upImg").hide() }else{ $(".upImg").css("display","block") } $(".close").click(function(){ var ind=$(this).parent().index() $(".imgContainer").eq(ind).remove() var len=$(".imgContainer").length if(len==0 ||len=="" || len==null){ $("#imgBox").hide() }else if(len<3){ $(".upImg").show() } }) }) } })

</ script >