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" οnchange="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" οnclick="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" οnclick="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)" οnclick="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();
})
})
});