Javascript 使用Ajax的图像预览：返回一个损坏的图像图标

我正在尝试使用Ajax制作一个图像预览函数

当我尝试时，我会弹出一些问题：

Ajax运行时，图像本身是否已上载到服务器？或者只发送了一个数组，包括字符串名称、类型、大小、tmp_名称？ 下面的代码返回一个损坏的图像图标。 我试过：

HTML文件：

<script type="text/javascript" src="/script/googleapis.js"></script>


<input multiple type="file" id="myFile" size="50">

<div id="sub">submit</div>

<div id="testtest"></div>



<script>
$("#sub").click(function(){
    // get the file objects
    var files = $("#myFile")[0].files,
        data = new FormData;

    for (var i = 0; i < files.length; i++){
        //test if the files[i] has the file objects
        console.log(files[i]);
        //post objects to another php file
        data.append('img[]', files[i]);
    }

    $.ajax({
        url: "testphp.php",
        type: "POST",
        data: data,
        contentType: false,
        processData: false,
        success: function(result){
            $("#testtest").html(result);
        }
    });
});

</script>

PHP文件test.PHP

<?php

$file_name=$_FILES['img']['name'][0];
$file_tmp=$_FILES['img']['tmp_name'][0];
var_dump($file_tmp); // for test if the variable has been post successfully
echo "<img src='".$file_tmp."'>";
?>

---

在这里添加图像预览

使用filereader并不难

HTML

---

文件需要一个有效的EncTypeYou详细说明一下吗？您是否可以尝试将“FormData”对象直接传递到PHP脚本，而不是附加任何内容。然后在PHP脚本中迭代图像数组。好的，我不明白。为什么要通过ajax使用图像预览。为什么不使用filereader预览绕过进入服务器的图像？不管怎样，试着在ajaxFile reader中添加mimeType:multipart/form data，对于我这个初学者来说似乎太难了…你知道一个比它更友好的教程吗？谢谢，它工作得很好！当文件对象发布到php文件时，例如fileName:07.png fileSize:33022 lastModifiedDate:Date name:07.png size:33022 type:image/png webkitRelativePath:文件本身以及大量字节是否也会传输到服务器端？或者仅传输了上述属性值对。我不清楚文件对象帖子背后隐藏着什么。它不会传输到服务器。这将绕过服务器。这样做的目的是允许浏览器显示来自客户端本地驱动器的图像。

<input id="image" type="file" multiple></input>
<div id="image-preview"></div>

$('#image').change(function () {  //whenever the input changes
    PreviewImage(this);
});

function PreviewImage(source) {
    if ( !! window.FileReader) { //check if browser supports file reader
        $('#image-preview').html(''); //wipe the preview container
        var files = source.files;  //get the file from the input
        for (var i = 0; i < files.length; i++) {
            var file = files[i].name;  //get the file name *if you need it*
            $reader = new FileReader(); //initialize file reader
            $reader.readAsDataURL(files[i]); //read the file
            $reader.onload = function (e) {  //load the result
                $('#image-preview').append('<div class="images"><img src="' + e.target.result + '" ></div>'); 
                  //e.target.result is the src
            }
        }
    }
}

.images {
    float:left;
}
.images img {
    width:auto;
    height:auto;
    max-width:200px;
    max-height:200px;
}