html代码
<ul class="commodityList commoService goods-info repair-goods-list repair_box box_type2">
???<li class="js_close"><i class="fa fa-trash-o"></i></li>
???<li class="clearfix norepairList node-goods-li">
???????<div class="commodityListImg pull-left posi-rel norepair-goods-img-node">
???????????<em class="threeArrIcon">
???????????????<a class="delete-norepair-img hide"> </a>
???????????????<span class="goods-sn">1</span>
???????????</em>
???????????<div class="commodityListFl pull-left ?norepair-goods-info-node">
???????????????<div class="commodityListFlT clearfix mb-10 node-goods-category-parent clearfix">
???????????????????<div class="gTit pull-left">
???????????????????????<em class="redDot">*</em>商品类别：
???????????????????</div>
???????????????????<div class="gSelect w-165 pull-left mr-10 node-goods-category" data-original-title="" title="">
???????????????????????<select name="category[]" class="a_category" onchange="changeCategory(this)">
???????????????????????????<option>请选择商品</option>
???????????????????????????@foreach($product_category as $product)
???????????????????????????????<option value="{{$product->id}}">{{$product->name}}</option>
???????????????????????????@endforeach
???????????????????????</select>
???????????????????????<select name="c_category[]" class="c_category">
???????????????????????????<option>请选择商品</option>
???????????????????????</select>
???????????????????</div>
???????????????????<div class="node-goods-unit-info pull-left clearfix">
???????????????????????<div class="pull-left inputAddSub mr5 node-goods-number">
???????????????????????????<a class="pull-left" onclick="number(this)">-</a>
???????????????????????????<input class="pull-left fun-goods-number fun-limit-number" type="number"
??????????????????????????????????name="good_number[]" value="1" placeholder="" autocomplete="off">
???????????????????????????<a class="pull-left" onclick="number(this)">+</a>
???????????????????????</div>
???????????????????????<span class="pull-left node-goods-unit"> 个</span>
???????????????????</div>
???????????????????<em class="garbageIcon node-delete-goods"></em>
???????????????</div>
???????????????<div class="commodityListFlT clearfix mb-10">
???????????????????<div class="gTit pull-left">
???????????????????????<em class="redDot">*</em>故障描述：
???????????????????</div>
???????????????????<input type="text" class="commoditIpt fun-goods-name" name="good_type[]" maxlength="40"
??????????????????????????autocomplete="off" placeholder="请填写商品的型号" datatype="*" nullmsg="请输入商品型号">
???????????????</div>
???????????????<ul class="repair_img clearfix bbs_ad">
???????????????????<li class="imgbox">
???????????????????????<div class="imgnum">
???????????????????????????<input type="file" class="filepath"/>
???????????????????????????<span class="close">X</span>
???????????????????????????<div class="img1"></div>
???????????????????????????<img src="" class="img2"/>
???????????????????????</div>
???????????????????</li>
???????????????????<li class="imgbox">
???????????????????????<div class="imgnum">
???????????????????????????<input type="file" class="filepath"/>
???????????????????????????<span class="close">X</span>
???????????????????????????<div class="img1"></div>
???????????????????????????<img src="" class="img2"/>
???????????????????????</div>
???????????????????</li>
???????????????????<li class="imgbox">
???????????????????????<div class="imgnum">
???????????????????????????<input type="file" class="filepath"/>
???????????????????????????<span class="close">X</span>
???????????????????????????<div class="img1"></div>
???????????????????????????<img src="" class="img2"/>
???????????????????????</div>
???????????????????</li>
???????????????????<li class="imgbox">
???????????????????????<div class="imgnum">
???????????????????????????<input type="file" class="filepath"/>
???????????????????????????<span class="close">X</span>
???????????????????????????<div class="img1"></div>
???????????????????????????<img src="" class="img2"/>
???????????????????????</div>
???????????????????</li>
???????????????????<li class="imgbox">
???????????????????????<div class="imgnum">
???????????????????????????<input type="file" class="filepath"/>
???????????????????????????<span class="close">X</span>
???????????????????????????<div class="img1"></div>
???????????????????????????<img src="" class="img2"/>
???????????????????????</div>
???????????????????</li>
???????????????</ul>
???????????????<div id="bbs_ad"></div>
???????????????<div class="text-right">
???????????????????<a class="add_picList" href="javascript:void(0)" onclick="addPic(this)">继续添加图片</a>
???????????????</div>
???????????????<p>请按照实际情况上传图片，最多可上传10张;支持JPG/JPEG/PNG格式,大小不超过5M。</p>
???????????</div>
???????</div>
???</li>
</ul>
js代码,每个file_id[]数组取对应的块的索引区分 后台判断存储
//JS上传图片显示
$(function () {
???$(document).on("change", ".filepath", function () {
???????var srcs = getObjectURL(this.files[0]); ??//获取路径
???????var _this = $(this);
???????var dd = $(this).parents(‘.commodityList‘).index();
???????console.log(dd);
???????console.log(this.files[0]);
???????var html = ‘‘;
???????var formData = new FormData();
???????formData.append("file", this.files[0]);
???????$.ajax({
???????????url: "/task/fileUpload",
???????????type: "POST",
???????????data: formData,
???????????headers: {
???????????????‘X-CSRF-TOKEN‘: $(‘meta[name="csrf-token"]‘).attr(‘content‘)
???????????},
???????????/**
????????????*必须false才会自动加上正确的Content-Type
????????????*/
???????????contentType: false,
???????????/**
????????????* 必须false才会避开jQuery对 formdata 的默认处理
????????????* XMLHttpRequest会对 formdata 进行正确的处理
????????????*/
???????????processData: false,
???????????success: function (data) {
???????????????console.log(data);
???????????????html = ‘<input type="hidden" name="file_id‘ + dd + ‘[]" value="‘ + data.file_url + ‘">‘;
???????????????_this.parents(‘.imgnum‘).append(html);
???????????????$("#imgWait").html("上传成功");
???????????},
???????????error: function () {
???????????????alert("上传失败！");
???????????????$("#imgWait").hide();
???????????}
???????});
???????$(this).nextAll(".img1").hide(); ??//this指的是input
???????$(this).nextAll(".img2").show(); ?//fireBUg查看第二次换图片不起做用
???????$(this).nextAll(‘.close‘).show(); ??//this指的是input
???????$(this).nextAll(".img2").attr("src", srcs); ???//this指的是input
???????$(".close").on("click", function () {
???????????$(this).hide(); ????//this指的是span
???????????$(this).nextAll(".img2").hide();
???????????$(this).nextAll(".img1").show();
???????})
???})
});
多个图片框上传图片
原文地址：http://www.cnblogs.com/chen1970s/p/7744069.html