由网友(笑看红尘心以醉)分享简介：我用2档index.js，upload.php的试图通过AJAX，如果成功追加上传文件（IMG），以div中 uploadfile_show 。但它不工作，有几个问题，下面是我的code什么建议吗？ 感谢。upload.php的1. 表单的enctype 还需要补充的吗？2. 如果（$ _ FILES）和检查$...

我用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);
        }
    });
});