javascript – 我可以使用jquery ajax和php上传文件,需要一些解释和修改

我读过这个.

https://developer.mozilla.org/en/docs/Web/API/FormData

仍然无法理解为什么formdata(frm)在代码中是空的.的console.log(FRM);返回“FormData {}”为空.为什么？

file_form.PHP =>

<title>Upload File</title>
<div id="targetLayer">No Image</div>
<img id="my_image1" src="" />
<img id="my_image2" src="" />

<form id="uploadForm1" enctype="multipart/form-data">
    <input name="image1" type="file" />
    <input type="submit" value="Submit" />
</form>

<form id="uploadForm2" enctype="multipart/form-data">
    <input name="image2" type="file" />
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript" src="jquery-1.11.3.js"></script>

<script type="text/javascript">

    $(document).ready(function (e) {
        $("#uploadForm1").on('submit',(function (e) {
            frm = new FormData($(this)[0]);
            console.log(frm);
            e.preventDefault();
            $.ajax({
                url: "upload_script1.PHP",type: "POST",data: frm,contentType: false,cache: false,processData: false,success: function (response) {
                    var JsonObject = JSON.parse(response);
                    $("#targetLayer").html(response);

                    var fl1 = "uploads/" + JsonObject.image1;
                    $("#my_image1").attr("src",fl1).height(100).width(100);
                }
            });
        }));

        $("#uploadForm2").on('submit',(function (e) {
            frm = new FormData($(this)[0]);
            e.preventDefault();
            $.ajax({
                url: "upload_script2.PHP",success: function (response) {
                    var JsonObject = JSON.parse(response);
                    $("#targetLayer").html(response);

                    var fl2 = "uploads/" + JsonObject.image2;
                    $("#my_image2").attr("src",fl2).height(100).width(100);
                }
            });
        }));


    });
</script>

upload_script1.PHP =>

<?PHP
    $uploaddir = '/var/www/html/file-upload/uploads/';
    $uploadfile = $uploaddir . basename($_FILES['image1']['name']);
    move_uploaded_file($_FILES['image1']['tmp_name'],$uploadfile);

    $image1 = $_FILES['image1']['name'];
    $images["image1"] = $image1;
    echo json_encode($images);
?>

upload_script2.PHP =>

<?PHP
    $uploaddir = '/var/www/html/file-upload/uploads/';
    $uploadfile = $uploaddir . basename($_FILES['image2']['name']);
    move_uploaded_file($_FILES['image2']['tmp_name'],$uploadfile);
    $image2 = $_FILES['image2']['name'];
    $images["image2"] = $image2;
    echo json_encode($images);
?>

>任何人都可以将两个$.ajax()代码重写为一个$.ajax()代码,使代码更短吗？如有必要,重写html和PHP代码.

任何帮助将受到高度赞赏.
提前致谢.

解决方法

我只修改了javascript部分.

我的例子是……

<title>Upload File</title>
<div id="targetLayer">No Image</div>
<img id="my_image1" src=""/>
<img id="my_image2" src=""/>

<form id="uploadForm1" enctype="multipart/form-data">
    <input name="image1" type="file" />
    <input type="submit" value="Submit" />
</form>

<form id="uploadForm2" enctype="multipart/form-data">
    <input name="image2" type="file" />
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript" src="jquery-1.11.3.js"></script>

<script type="text/javascript">

function fetch( type ) {

    var typeMap = {
        form1: { formId: 'uploadForm1',url: 'upload_script1.PHP',flKey: 'image1',imgId: 'my_image1' },form2: { formId: 'uploadForm2',url: 'upload_script2.PHP',flKey: 'image2',imgId: 'my_image2' }
    };

    var info = typeMap[ type ];
    if( ! info ) return console.error('no type: ' + type );

    $("#"+info.formId).on('submit',(function(e) {

        frm = new FormData($(this)[0]);
        console.log(frm);
        e.preventDefault();
        $.ajax({
            url: info.url,data:  frm,processData:false,success: function(response){                
                var JsonObject = JSON.parse(response);              
                $("#targetLayer").html(response);

                var fl = "uploads/" + JsonObject[ info.flKey ];
                $("#"+info.imgId).attr("src",fl).height(100).width(100);
            }           
       });
    }));
}

$(document).ready(function (e) {    
    fetch( 'form1' );
    fetch( 'form2' );
});

</script>