Ajax-based formData image and data upload,

Source: Internet
Author: User

Ajax-based formData image and data upload,

I recently worked on a project that encountered many pitfalls in user data and form upload. I would like to share my summary with you and hope to help you. (Thank you for your attention)

If there are too many, let's just get the code !!

1. Upload components
The project is based on the vue framework.

<Template> <div class = "newproduct"> <div class = "topbox"> <div class = "shopbox">  <p class =" shopname "> happy shops </p> </div> <div class =" goodsbox "> <div class = "startleft namebox"> <label class = "title"> Item Name: </label> <input class = "noborder" v-model = "goodsname" placeholder = "Enter product name"> </div> <div class = "startleft goodstypebox"> <label class = "title"> item type: </label> <select v-model = "goodstype"> <option value = "select"> select </option> <option value = ""> books </ option> <option value = "coupon"> coupon </option> <option value = "clothing"> clothing </option> <option value = "gift"> GIFT </option> <option value = "Sports Equipment"> sports equipment </option> <option value = "Electronic Equipment"> electronic equipment </option> <option value = "daily necessities"> daily Necessities </option> <option value = "other"> Other </option> </select> </div> <div class = "startleft describebox"> <label class = "title"> product description </label> </div class = "startleft"> <textarea class = "describeinfo" v-model = "goodsinfo"> </textarea> <div class = "startleft"> <label class = "title"> unit price: </label> <input class = "noborder" placeholder = "Enter the unit price" v-model = "price"> </div> <div class = "startleft"> <label class = "title"> quantity: </label> <input class = "noborder" placeholder = "Enter the quantity" v-model = "number"> </div> <div class = "startleft"> <label class = "title"> contact number: </label> <input class = "noborder" placeholder = "Enter the mobile phone number" v-model = "phone"> </div> <div class = "startleft"> <label class = "title"> address: </label> <input class = "noborder" placeholder = "Enter the address" v-model = "address"> </div> <div class = "startleft"> <label class = "title"> image </label>   </div> <div class = "addimg"> <div class = "imgbox">  <input id =" file "type =" file "class =" fileupload "accept =" image/* "multiple capture =" camera "@ change =" viewimg () "/> </div> <div class =" imgbox ">  <input type =" file "class =" fileupload "accept =" image/* "capture =" camera "@ change =" viewimg () "/> </div> <div class =" bottombox ": style =" {'top' :( height-12) + 'px'} "> <ul class =" bottommenu "> <li class =" item "@ click =" backHome () "> homepage </li> <li class =" item "@ click =" backShop () "> back to shelf </li> <li class =" item border "> discard edit </li> <li class =" item "@ click =" uploadtest () "> mounting </li> </ul> </div> <div class =" fillbottom "> </div> </template>

Description: it contains two components for uploading images. The previous one has multiple multi-file mode, that is, multiple images can be selected at a time, followed by the single file mode.

2. preview the image.

Viewimg ($ event) {// obtain the current input tag var currentObj = event. currentTarget; // find the img tag of the image to be previewed, and dynamically generate var img = currentObj. parentNode. children [0]; setImagePreview (currentObj, img); function setImagePreview (docObj, imgObjPreview) {if (docObj. files & docObj. files [0]) {imgObjPreview. style. display = 'block'; imgObjPreview. src = window. URL. createObjectURL (docObj. files [0]) ;}}

The main function of this part is to display the selected image. Of course, there are not multiple images.

3. Core Part: Image Upload

/* Upload images and form data in formData form */upload: function () {var _ self = this; var formData = new FormData (); var inputs = $ ("input. fileupload "); for (var I = 0; I <inputs. length; I ++) {var file = inputs [I]; if (inputs [I]. files [0]) {formData. append ("file", file. files [0], file. files [0]. name) ;}} formData. append ('bartercommodityname', _ self. goodsname); formData. append ('bartersellingice ', _ self. price); formData. append ('bartercontactinformation ', _ self. phone); formData. append ('bartercommodityquantity ', _ self. number); formData. append ('bartercommodityaddress', _ self. address); formData. append ('barterdescriptioninform', _ self. goodsinfo); formData. append ('bartercategoryid', _ self. goodstype); var _ self = this; $. ajax ({type: 'post', url :' ', DataType: "json", data: formData, processData: false, contentType: false, success: function (data) {console. log (data); if (data. code == 200) {console. log ("success"); // _ self. $ router. push ('/');} else {alert (data. message );}}});}


Similar to formData. append ('bartercategoryid', _ self. goodstype); is a key-value pair to save data, while formData. append ("file", file. files [0], file. files [0]. name); the first parameter is the parameter name received by the server, the second parameter is the file object, and the third parameter is the file name. In this way, you can add multiple files as arrays to the server.

Specify the MultipartFile type when the backend receives a file of this type.


ProcessData: false,
ContentType: false,

These two sentences must be added. Otherwise, the data will be serialized, And the backend cannot recognize them.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.