Question

您好我刚开始学习jquery ajax上传文件。

我在这里使用简单的html表单并在其中嵌入javascript / jquery代码执行ajax请求。

<!DOCTYPE HTML>

<html>
<head>
    <script type='text/javascript' src='jquery-2.1.3.min.js'></script>
</head>
<body>
    <form id='entryform' method="">
        <input id='formText' type='text' name='text'><br>
        <input id='formFile' type='file' name='file'>
    </form>
    <div id='fill'></div>
</body>
<script>
    $(document).ready(function(){
        $('#entryform').change(function(e){
            e.preventDefault();
            $.ajax({
                url : 'ajax.php',
                data : new FormData(this),
                processData : false,
                contentType : false,
                type : 'POST',
                success : function (retval){
                    $('#fill').html(retval);
                } 
            });
        });
    });
</script>

这是流程的PHP代码：

<?php 

$updir = 'images/';

move_uploaded_file($_FILES['file']['tmp_name'], $updir.$_FILES['file']['name']);

//echo $updir._FILES['file']['name'];
echo "<img src='".$updir.$_FILES['file']['name']."'>";

我上面的代码我试图在不重新加载页面的情况下上传图像并在图片上传后立即显示图像。

但是当我试图运行代码时，我会遇到一种奇怪的行为，就是这样输入文本形式的输入将立即显示新输入的文本表单中的值。

我的意思是我希望在上传时不会立即向用户显示表单文件，而不是表单文本。

知道怎么解决这个问题吗？没有省略文本形式？

Answer 1

我想你需要将Event handler添加到formFile中，这样可以帮助你。

$(document).ready(function () {
    $('#formFile').change(function (e) {
        var myfiles = $(this).get(0);
        var files = myfiles.files;
        var data = new FormData();
        for (i = 0; i < files.length; i++) {
            data.append('file', files[i]);
        }
        e.preventDefault();
        $.ajax({
            url : 'ajax.php',
            data : data,
            processData : false,
            contentType : false,
            type : 'POST',
            success : function (retval) {
                $('#fill').html(retval);
            }
        });
    });
});

使用JQuery ajax从多个HTML表单发送数据

1 个答案: