File upload image Get path address

File upload image Get path address

Similar: Click button, select the image, in the corresponding input box to display the image path address

Like this

Principle: Opacity to hide the native input file and then use the. file-btn to simulate the location of the input file and then beautify it.

FILE-BTN set Overflow:hidden; to not let the excess part also click Add File

============== Core JQ Code ================================

$ (function () {
$ (". Input-file"). each (function (i) {
$ (". Input-file"). EQ (i). bind (' Change ', function () {
$ (". Input-txt"). EQ (i). Val ($ (this). Val ());
});
})
})

====================================================

Reference bread Source Address: Http://files.cnblogs.com/files/leshao/codepen_vLeoJm.rar

List code after modification: http://files.cnblogs.com/files/leshao/file%E5%88%97%E8%A1%A8%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E8% B7%af%e5%be%84.rar

Doshe bread, perfect, haha

File upload image Get path address