Question

我正在尝试使用Ajax制作图像预览功能。

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

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

我试过了：

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."'>";
?>

Answer 1

此处添加图片预览https://jsfiddle.net/bhx0s2dh/2/

使用文件阅读器并不难。

HTML

dbliss@nx3[~]> cd lib/python2.7/site-packages/scipy/linalg/
dbliss@nx3[linalg]> ldd cython_lapack.so 
    linux-vdso.so.1 =>  (0x00007ffe6bbec000)
    liblapack.so.3 => /usr/lib64/atlas/liblapack.so.3 (0x00007fceb3f35000)
    libblas.so.3 => /usr/lib64/libblas.so.3 (0x00007fceb3cdd000)
    libpython2.7.so.1.0 => not found
    libgfortran.so.3 => /usr/lib64/libgfortran.so.3 (0x00007fceb39eb000)
    libm.so.6 => /lib64/libm.so.6 (0x00007fceb3766000)
    libgcc_s.so.1 => /lib64/libgcc_s.so.1 (0x00007fceb3550000)
    libc.so.6 => /lib64/libc.so.6 (0x00007fceb31bc000)
    libf77blas.so.3 => /usr/lib64/atlas/libf77blas.so.3 (0x00007fceb2f9c000)
    libcblas.so.3 => /usr/lib64/atlas/libcblas.so.3 (0x00007fceb2d7c000)
    /lib64/ld-linux-x86-64.so.2 (0x000000377cc00000)
    libatlas.so.3 => /usr/lib64/atlas/libatlas.so.3 (0x00007fceb2720000)
    libpthread.so.0 => /lib64/libpthread.so.0 (0x00007fceb2502000)

的Javascript

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

CSS

$('#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
            }
        }
    }
}

使用Ajax进行图像预览：返回损坏的图像图标

1 个答案: