<input type= "File" > Change event Exception handling method

Problem: Recently found a strange bug,

That is, the upload image needs to use input type=file for file selection. Because to adapt to the UI diagram of the artwork, the input box of the selected file is hidden. The Select event of input is then triggered by a click event of another button. The code is as follows:

<div style= "width:120px;height:120px" >

</div>

<input type= "File" style= "Display:none" id= "Choosefile" >
JS section, click Occupy Bitmap for File selection
$ (' #uploadImg '). On (' click ', function () {
$ (' #chooseFile '). Trigger (' click ');
$ (' #chooseFile '). On (' Change ', function () {
Here to implement a picture preview, one way is to send to the background, and then back to the background of the picture's URL. The other way is to use plug-ins. The code doesn't show
Suppose we use a method sent to the background, assuming that responseimgurl is the picture URL returned in the background
$ (' #uploadImg '). attr (' src ', responseimgurl)//Implementation Preview
})
})

As mentioned in the code above, the first time in the Chrome browser image selection is not a problem, can be successfully previewed, but the second time to select the file, the change event as if it is invalid, need to click a few times to successfully select the picture, once I have more than one map to upload, There will be multiple clicks to select to once
Problems with the picture file,

In other words, you need to click multiple times to uploadimg this element to trigger a change event choosefile this element. It's so sore. Online to see some netizens said may be due to the browser on the Display=none File selection box for special processing.
So I choosefile the display=none to comment off, the results of no change. After several attempts, a successful solution is found,

That is, do not use the trigger method to trigger the Choosefile file Click events, directly click the Choosefile file selection.
Of course, different browsers on the input type=file this type of choice box parsing different, resulting in the appearance of differences, in order to avoid, we can do a unified processing:

Workaround:

<div style= "Width:120px;height:120px;position:relative" >

<input type= "File" style= "Display:none;position:absolute;width:100%;height:100%;top:0;left:0;z-index:1000;o pacity:0 "id=" Choosefile ">
</div>

After changing to the above code, each time you click on the bitmap, actually click on the choosefile element, so that the file selection directly. No trigger event is required for the page.

<input type= "file" > Change event Exception handling method