Front-end picture upload idea record

Requirements: can upload more than one at a time, multiple uploads, can be deleted, a small map preview, the use of seven cow cloud storage images; non-mandatory; After submitting the form form, you can re-edit it;

Platform: PC, compatible with the main consideration of Google Browser;

Idea: 1. Prepare page structure Input[type]=file Mutipul and Input[type=hidden]

2. Each time the user selects a picture

2.1 The user clicked Input but did not select the picture, regardless of whether the change event triggered, no action;

2.2 The user clicks input but selects the picture and the previous one, does not trigger the Change event, no action;

2.3 Users click Input to select the picture and exclude the above two cases, prepare formdata empty object, get files and traverse append into formdata files (files is our company before and after the set), request to upload seven Qiniu, get the path;

2.4 Successful request (statas=success), reminder upload success, processing the returned picture path string to display the picture (and each picture with a delete flag), the picture path processing array into Input[type=hidden]; request failed, prompt upload failed, please try again;

3. The user clicks the delete flag, deletes the current single picture, and rejects the current path from the value of Input[type=hidden];

4. Click submit form, request background, hide delete flag;

5. The user re-edit, display the deletion flag, repeat step three;

6. The user submits the form again. Repeat step four;

Please point out where the consideration is not complete, thank you!

Front-end picture upload idea record