How to upload images asynchronously using Ajax (html,javascript,php) _php Tutorial

How to upload images asynchronously using Ajax (html,javascript,php)

The first two days of the project need to use the asynchronous upload pictures and display upload progress function, so find a lot of foreign articles, over the mountains to meet a variety of pits, here write an article record.

Html

HTML code There's nothing to say, a form form, and a file type of input. Let's look at the JS section.

Javascript

    Binding the ' Submit ' event.        $ (' #fileupload-form '). On (' Submit ', (function (e) {e.preventdefault ();       Serialize form var Serializedata = $ (this). Serialize ();       var formData = new FormData (this); $ (this). Ajaxsubmit ({type: ' POST ', url: *yoururl*, DataType: ' JSON ', data:ser               Ializedata,//Data:formdata,//attention!!! Contenttype:false, Cache:false, Processdata:false, Beforesubmi T:function () {//processing before uploading a picture}, Uploadprogress:function (event, Position, Tota L, PercentComplete) {//control the progress bar here}, Success:function () {}, E            Rror:function (data) {alert (' Error uploading image ');    }        });    }));       Binding file Selection event, a Select the picture, let ' form ' submit.   $ (#fileupload). On (change, function () {$ (this). Parent (). submit (); }); 

Php

遇到的坑：

序列化表单，因为是文件，不能通过val()，text()等方法获取到它的值，只能通过序列化表单提交。代码里面使用.serialize()，有另外一种做法是使用.FormData()来提交，但是实验过程中，一开始正常，后来报错了。在stackoverflow.com上有人看到有人遇到同样地问题，没有解决，于是就放弃了。 普通的ajax是没办法或者说很难拿到上传进度的。这里使用了一个插件jQuery Form Plugin，使用方法很简单，原本ajax的配置都能用，而且有很多实用功能和详尽的使用文档。推荐~ ajax上传图片这三个参数必须配置contentType: false, cache: false, processData:false,。 获取本地预览图，这种方法可能会有浏览器兼容性问题。

$(#fileupload).change(function(){ if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#theImg').attr('src', e.target.result); } reader.readAsDataURL(this.files[0]); }}

php部分注意虽然Ajax那里使用的是POST方法，但是后台接受的时候只要是文件都是用$_FILES。你可以通过$_FILES['file']['type']去判断文件格式来做安全处理，我们这里只是演示。还有其他参数，比如tmp_name是文件路径，name是文件名。后台接收以后，你可以使用move_uploaded_file()来将文件保存到服务器上。这里就不多说。

其他补充

另外@_w同学补充，不刷新页面还可以通过设置form的target属性指向一个当前页面隐藏的iframe来实现。让那个iframe去刷新跳转页面。上面提到的jQuery Form Plugin也支持你这么做。
另外再推荐一个插件jquery-iframe-transport

推荐阅读

uploading-files-with-ajax image-upload-example jquery-progress-bar-for-php-ajax-file-upload

javascript方面我是新手，希望这篇文章能帮到更多遇到相同问题的人。如果哪里写的不好或者不对，还希望各位同行能够善意指出。

http://www.bkjia.com/PHPjc/1036925.html www.bkjia.com true http://www.bkjia.com/PHPjc/1036925.html techarticle the method of uploading pictures asynchronously using Ajax (html,javascript,php) The first two days of the project need to use the asynchronous upload of pictures and display the upload progress function, so find a lot of foreign articles, turn mountains ...

