Multiple picture frames uploading pictures

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.