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

您的FormData对象可能显示为空，因为您的浏览器不支持迭代器。

查看MDN中的方法兼容性表。在内部，控制台可能会尝试使用entries方法公开的迭代器来枚举属性。

我在Chromium 45中得到了同样的结果。

至于简化代码，您可以通过参数化函数和PHP脚本来合并它们。

function createFormHandler($form, url, $image) {
  $form.on('submit', function(e) {
    var frm = new FormData($form[0]);
    e.preventDefault();
    $.ajax({
      url: url,
      type: "POST",
      data: frm,
      contentType: false,
      cache: false,
      processData: false,
      success: function(response) {                
        var JsonObject = JSON.parse(response);              
        $("#targetLayer").html(response);
        var src = "uploads/" + JsonObject.image1;
        $image.attr("src", src).height(100).width(100);
      }           
    });
  });
}
createFormHandler($('#uploadForm1'), 'upload_script.php?id=1', $('#my_image1'));
createFormHandler($('#uploadForm2'), 'upload_script.php?id=2', $('#my_image2'));

现在，每个表单的数字id都表示为一个URL参数，而不必是一个单独的脚本。您可以合并两个PHP文件并使用一个upload_script.php。

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

这也允许您规范化输入名称。

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

I think it will minimize your code
<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 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);
                     $("#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']);
     $uploadfile2 = $uploaddir . basename($_FILES['image2']['name']);     
    move_uploaded_file($_FILES['image1']['tmp_name'], $uploadfile);
    move_uploaded_file($_FILES['image2']['tmp_name'], $uploadfile2);
    $image1 = $_FILES['image1']['name'];
    $image2 = $_FILES['image2']['name'];
    $images["image1"] = $image1;
     $images["image2"] = $image2;
    echo json_encode($images);
?>

我只修改了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,
            type: "POST",
            data:  frm,
            contentType: false,
            cache: false,
            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>