Home >php教程 >php手册 >使用Ajax异步上传图片的方法(html,javascript,php)

使用Ajax异步上传图片的方法(html,javascript,php)

WBOY
WBOYOriginal
2016-06-13 08:57:23918browse

使用Ajax异步上传图片的方法(html,javascript,php)

前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下。

HTML



HTML代码没什么好说,一个form表单,还有文件类型的input。我们来看js部分。

javascript

<code class="language-javascript" hljs="">    //绑定了`submit`事件。    
    $(&#39;#fileupload-form&#39;).on(&#39;submit&#39;,(function(e) {
        e.preventDefault();
        //序列化表单   
       var serializeData = $(this).serialize();

       // var formData = new FormData(this);
       $(this).ajaxSubmit({
            type:&#39;POST&#39;,
            url: *yoururl*,
            dataType: &#39;json&#39;, 
            data: serializeData,            
            // data: formData,

            //attention!!!   
            contentType: false,      
            cache: false,             
            processData:false,      

            beforeSubmit: function() {
                    //上传图片之前的处理   
            },
            uploadProgress: function (event, position, total, percentComplete){ 
                //在这里控制进度条   
            },
            success:function(){

            },
            error:function(data){
                alert(&#39;上传图片出错&#39;);
            }
        });
    }));

    //绑定文件选择事件,一选择了图片,就让`form`提交。   

    $(#fileupload).on(change, function() {
        $(this).parent().submit();
    });</code>

PHP

<code class="language-php" hljs=""><!--?php
    //通过$_FILES[]去获取文件
    echo '$_FILES['file']';</code--></code>

遇到的坑:

序列化表单,因为是文件,不能通过<code>val()text()等方法获取到它的值,只能通过序列化表单提交。代码里面使用.serialize(),有另外一种做法是使用.FormData()来提交,但是实验过程中,一开始正常,后来报错了。在stackoverflow.com上有人看到有人遇到同样地问题,没有解决,于是就放弃了。 普通的ajax是没办法或者说很难拿到上传进度的。这里使用了一个插件jQuery Form Plugin,使用方法很简单,原本ajax的配置都能用,而且有很多实用功能和详尽的使用文档。推荐~ ajax上传图片这三个参数必须配置contentType: false, cache: false, processData:false,。 获取本地预览图,这种方法可能会有浏览器兼容性问题。
<code class="language-php" hljs=""><code class="language-javascript" hljs="">$(#fileupload).change(function(){
    if (this.files && this.files[0]) {
       var reader = new FileReader();            
       reader.onload = function (e) {
            $(&#39;#theImg&#39;).attr(&#39;src&#39;, e.target.result);
        }
       reader.readAsDataURL(this.files[0]);
   }
}</code></code>
php部分注意虽然Ajax那里使用的是<code>POST方法,但是后台接受的时候只要是文件都是用$_FILES。你可以通过$_FILES['file']['type']去判断文件格式来做安全处理,我们这里只是演示。还有其他参数,比如tmp_name是文件路径,name是文件名。后台接收以后,你可以使用move_uploaded_file()来将文件保存到服务器上。这里就不多说。

其他补充

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

推荐阅读

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

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

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn