使用JQueryajax从多个HTML表单发送数据 - Sending data from multiple HTML form using JQuery ajax

Sending data from multiple HTML form using JQuery ajax

你好，我刚刚开始学习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']."'>";

我上面的代码我正在尝试在不重新加载页面的情况下上传图像并且在图像已经上传之后立即向用户显示图像。

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

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

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

我想您需要将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);
            }
        });
    });
});