<div class="sq-box">
<div class="sq-msx w100" style="border:none">
<div class="sq-ms">案件图片</div>
<label for="pic1" class="picture" style="margin-left:0">
<p>上传</p>
<input id="pic1" name="pic[]" type="file" />
<img src="__PUBLIC__/home/images/picup.png" />
</label>
<label for="pic2" class="picture">
<p>上传</p>
<input id="pic2" name="pic[]" type="file" />
<img src="__PUBLIC__/home/images/picup.png" />
</label>
<label for="pic3" class="picture">
<p>上传</p>
<input id="pic3" name="pic[]" type="file" />
<img src="__PUBLIC__/home/images/picup.png" />
</label>
<label for="pic4" class="picture" style="margin-left:0">
<p>上传</p>
<input id="pic4" name="pic[]" type="file" />
<img src="__PUBLIC__/home/images/picup.png" />
</label>
<label for="pic5" class="picture">
<p>上传</p>
<input id="pic5" name="pic[]" type="file" />
<img src="__PUBLIC__/home/images/picup.png" />
</label>
<label for="pic6" class="picture">
<p>上传</p>
<input id="pic6" name="pic[]" type="file" />
<img src="__PUBLIC__/home/images/picup.png" />
</label>
</div>
</div>
<script type="text/javascript">
$('.picture').each(function(x){
$(this).find('input').change(function(e){
var file = e.target.files[0];
if (!/image\/\w+/.test(file.type)) {
alert("必须上传图片");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
var that = $(this).parent('label').find('img');
reader.onload = function(s) {
var imgSrc = this.result;
console.log(that);
that.attr("src", imgSrc);
};
})
})
</script>
<style>
.sq-ms{width: 100%; float: left;}
.picture{width: 32%; height: 100px; border:solid 1px #dedede; float: left; margin-top: 2%; position: relative; margin-left: 1%}
.picture img{width: 100%; height: 100%; position: absolute; left: 0; top: 0}
.picture p{width: 100%; text-align: center; float: left; line-height: 100px;}
.picture input{display: none;}
</style>