How to realize File upload by Form in jquery

This article introduces the relevant knowledge of "how to upload files in Form in jquery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

①, first html.

Upload pictures

Hide the real file upload button (because it's too ugly), define your own ".j _ uploadFile" trigger button, and then associate it with the file button in form.

② introduces jqueryForm

③, here comes the point.

/ / Click to upload the picture $('.j _ upLoadFile') .click (function () {$('.j _ file'). Click ();}); / / Select a new file $('.j _ file') .change (function () {/ / if the file is empty if ($(this). Val () =') {return } $('# submitForm') .ajaxSubmit ({type:'post', dataType:'json', success:function (result) {/ / the operation after a successful request / / and empty the original file, otherwise you cannot transfer $('.j _ file') .val ('') again if you select the same file. }, error:function () {/ / and empty the original file, otherwise you cannot transfer $('.j _ file') .val ('';}});} if you select the same file.

Click on the fake upload button remember to trigger the real file button at the same time, when the upload button value change value (that is, open the folder you select a new file, click OK), it will trigger the ajaxSubmit function, upload the entire form form, do not forget in the request success or failure, all want to clear the file value, otherwise the second time to select the same file, equal to value has not changed, do not upload.

This is the end of the content of "how to upload files in Form in jquery". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!