jquery + html achieve front-end upload pictures Preview

 

 
 
Is one such feature, click the plus sign, select the pictures appear, and then generate a preview after selecting good.
jquery + html achieve front-end upload pictures Preview
input so ugly, UI could not understand, be sure to change the plus sign
I used the fa icons, a set of external bootstrap4 class: border, set about padding, it seems almost centered, well
The easiest way to hide input
jquery + html achieve front-end upload pictures Preview

 

Then there js implementation:
jquery + html achieve front-end upload pictures Preview

Then, gorgeous bug appeared, see this.value I added it, because upload one is good, second upload, preview appears two second, third upload, preview it appears three third ..... later added this.value just fine, but the background will look F12 error, Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL' ........
Check it did not identify what are the solutions
 
CreateObjectURL been entangled in this method, even Quguan network to see an example
In fact, the root cause of the error is added this.value I'm blind
 
It is deleted, re-find problems where it is repeatedly displayed picture
Finally suddenly realized, it is caused by change of method
 
Change the method of problem, then back on after the input to hide invocation
Then I was really found, with the "label", is simply perfect
IE10 on the most difficult of all tests passed
 
The complete code:
jquery + html achieve front-end upload pictures Preview

jquery + html achieve front-end upload pictures Preview

 

Guess you like

Origin www.cnblogs.com/liliuguang/p/11269643.html