通过AJAX上传文件 [英] upload file through ajax

问题描述

我用2档index.js，upload.php的试图通过AJAX，如果成功追加上传文件（IMG），以div中 uploadfile_show 。
但它不工作，有几个问题，下面是我的code什么建议吗？

感谢。

upload.php的
1. 表单的enctype 还需要补充的吗？
2. 如果（$ _ FILES）和检查$ _FILES大小或tmp_name的值仍然使用 $ _ FILES ？

 如果（$ _ FILES）{
    $文件名= $ _FILES ['uploadfile'] ['名称'];
    $ filetmp = $ _FILES ['uploadfile'] ['tmp_name的值'];
    $档案大小= $ _FILES ['uploadfile'] ['大小'];
    如果（$文件大小＆LT; 1000000）{
        move_uploaded_file（$ filetmp，上传/ tmp目录/'.$文件名）;
        打印
            上传成功
            ＆LT; IMG SRC = \上传的/ tmp / $文件名\＆GT;
        ;
    }
    其他{
    }
}
其他{
    打印
        ＆LT; D​​IV CLASS = \uploaddiv \＆GT;
            ＆LT;表单的enctype = \多重/ form_data \＆GT;
                ＆LT;输入类型= \类型\NAME = \一个UploadFile \＆GT;
                ＆LT;输入类型= \提交\价值= \上传\级= \BTN \＆GT;
            ＆LT; /形式GT;
        ＆LT; / DIV＆GT;
    ;
}
打印
    ＆LT; D​​IV CLASS = \uploadfile_show \＆GT;＆LT; / DIV＆GT;
;
 

index.js
3.这几行是不是正确的？
变种UF = $（'uploaddiv形式。'）; VAR FD =新FORMDATA（UF）; fd.append（uploadfile，uploadfile）;
数据：FD，
4.任何事情，我错过了还是错了？

  $（'。BTN）。点击（函数（）{
    变种UF = $（'uploaddiv形式。'）;
    变种FD =新FORMDATA（UF）;
    fd.append（uploadfile，uploadfile）;
    $阿贾克斯（{
        键入：POST，
        网址：upload.php的，
        数据：FD，
        过程数据：假的，
        的contentType：假的，
        成功：函数（HTML）{
            $（'。uploadfile_show'）追加（HTML）。
        }
    }）;
}）;
 

解决方案

FORMDATA 需要为你使用Ajax来在其构造不是一个jQuery对象，也是一个表单元素通过调用提交你得prevent它的默认操作（即提交）的形式 preventDefault（）

  $（'。BTN）。点击（函数（五）{
    即preventDefault（）;
    变种UF = $（'uploaddiv形式。'）;
    变种FD =新FORMDATA（UF [0]）;
    $阿贾克斯（{
        键入：POST，
        网址：upload.php的，
        数据：FD，
        过程数据：假的，
        的contentType：假的，
        成功：函数（HTML）{
            $（'。uploadfile_show'）追加（HTML）。
        }
    }）;
}）;
 

I use 2 file index.js, upload.php try to upload file(img) through ajax and if success append to div uploadfile_show.
but it doesn't work , have few question and below is my code any suggestion?

Thanks.

upload.php
1. form enctype still need to add?
2. if($_FILES) and check $_FILES size or tmp_name still use $_FILES?

if($_FILES){
    $filename = $_FILES['uploadfile']['name'];
    $filetmp = $_FILES['uploadfile']['tmp_name'];
    $filesize = $_FILES['uploadfile']['size'];
    if($filesize < 1000000){
        move_uploaded_file($filetmp,'upload/tmp/'.$filename);
        print"
            upload success
            <img src=\"upload/tmp/$filename\">
        ";
    }
    else{
    }
}
else{
    print"
        <div class=\"uploaddiv\">
            <form enctype=\"multipart/form_data\">
                <input type=\"type\" name=\"uploadfile\">
                <input type=\"submit\" value=\"upload\" class=\"btn\">
            </form>
        </div>
    ";
}
print"
    <div class=\"uploadfile_show\"></div>
";

index.js
3. this few line is it the right?
var uf = $('.uploaddiv form');var fd = new FormData(uf);fd.append('uploadfile', uploadfile);
data: fd,
4. any thing I missed or wrong?

$('.btn').click(function(){
    var uf = $('.uploaddiv form');
    var fd = new FormData(uf);
    fd.append('uploadfile', uploadfile);
    $.ajax({
        type: "POST",
        url: "upload.php",
        data: fd,
        processData:false,
        contentType: false,
        success: function(html){
            $('.uploadfile_show').append(html);
        }
    });
});

解决方案

FormData takes a form element in its constructor not a jQuery object, also as you are using ajax to submit the form you'll have to prevent its default action(i.e. submitting) by calling preventDefault()

$('.btn').click(function(e){
    e.preventDefault();
    var uf = $('.uploaddiv form');
    var fd = new FormData(uf[0]);
    $.ajax({
        type: "POST",
        url: "upload.php",
        data: fd,
        processData:false,
        contentType: false,
        success: function(html){
            $('.uploadfile_show').append(html);
        }
    });
});

这篇关于通过AJAX上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！