Multiple picture frames uploading pictures

HTML code

<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> product Category:
</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> Please select the product </option>
@foreach ($product _category as $product)
<option value= "{{$product->id}}" >{{$product->name}}</option>
@endforeach
</select>
<select name= "c_category[" "class=" C_category ">
<option> Please select the product </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" >&nbsp;&nbsp; </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> Fault Description:
</div>
<input type= "text" class= "Commoditipt fun-goods-name" name= "good_type[" "maxlength=" 40 "
Autocomplete= "Off" placeholder= "please fill in the product model" datatype= "*" nullmsg= "Please enter the product model" >
</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>

</div>
</li>
<li class= "Imgbox" >
<div class= "Imgnum" >
<input type= "File" class= "filepath"/>
<span class= "Close" >X</span>
<div class= "IMG1" ></div>

</div>
</li>
<li class= "Imgbox" >
<div class= "Imgnum" >
<input type= "File" class= "filepath"/>
<span class= "Close" >X</span>
<div class= "IMG1" ></div>

</div>
</li>
<li class= "Imgbox" >
<div class= "Imgnum" >
<input type= "File" class= "filepath"/>
<span class= "Close" >X</span>
<div class= "IMG1" ></div>

</div>
</li>
<li class= "Imgbox" >
<div class= "Imgnum" >
<input type= "File" class= "filepath"/>
<span class= "Close" >X</span>
<div class= "IMG1" ></div>

</div>
</li>
</ul>
<div id= "Bbs_ad" ></div>
<div class= "Text-right" >
<a class= "add_piclist" href= "javascript:void (0)" onclick= "Addpic (This)" > continue to add pictures </a>
</div>
<p> please upload the picture according to the actual situation, upload up to 10 photos; Support jpg/jpeg/png format, size not more than 5M. </p>
</div>
</div>
</li>
</ul>
JS code, each file_id[] array takes the corresponding block of the index to distinguish the background of the store

JS Upload image Display
$ (function () {
$ (document). On ("Change", ". FilePath", function () {
var SRCs = Getobjecturl (This.files[0]); Get path
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 ')
},
/**
* Must be false to automatically add the correct Content-type
*/
Contenttype:false,
/**
* Must be false to avoid jquery's default handling of Formdata
* XMLHttpRequest will handle the formdata correctly.
*/
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 ("upload succeeded");

},
Error:function () {
Alert ("Upload failed! ");
$ ("#imgWait"). Hide ();
}
});

$ (this). Nextall (". Img1"). Hide (); This refers to input
$ (this). Nextall (". Img2"). Show (); Firebug View the second time to change pictures do not use
$ (this). Nextall ('. Close '). Show (); This refers to input
$ (this). Nextall (". Img2"). attr ("src", srcs); This refers to input

$ (". Close"). On ("click", Function () {
$ (this). Hide (); This refers to span
$ (this). Nextall (". Img2"). Hide ();
$ (this). Nextall (". Img1"). Show ();
})
})
});

Multiple picture frames uploading pictures