Question

所以我对ajax有点新意，我只是想知道是否有人可以帮助我... 我有我的主页。我只是把我正在使用的元素放在一起，所以我不需要整个页面。

<input type="file" id="myphoto" />

然后，我想要做的不是提交它，而是通过一个带有ajax形式的javascript函数来运行它，就像这样

$.ajax({
    type: "POST",
    url: "myphppage.php",
    "Whatever other code needed"
})

上传照片。然后，表单URL可以是将照片移动到不同目录的php页面。我希望你知道我的意思。任何帮助将不胜感激......

Answer 1

首先制作一个html文件，从任何地方选择文件，例如

<强> uplaod.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX UPLOAD</title>
</head>
<body>
<form enctype="multipart/form-data">
    <input id="file" type="file" />
    <input type="button" id="upload" value="Upload" />
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="upload.js"></script>
</html>

现在，制作如下的js文件，

<强> upload.js

$(document).ready(function() {
$('#upload').on('click', function() {
var file_data = $('#file').prop('files')[0];   
var form_data = new FormData();                  
form_data.append('file', file_data);

$.ajax({
            url: 'upload.php', 
            dataType: 'text',  
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
            success: function(data){
                alert(data); 
            }
 });
});
});

现在，创建目录上传以及将文件上传到上传目录的php文件

<强> upload.php的

<?php

if (0 < $_FILES['file']['error']) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
} else {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    echo "success";
}

Answer 2

XHR2 AJAX请求可以提交二进制数据，如图像：

DEMO

但是，更改地址栏（windows.location）将在加载新页面时中断上传。你可以通过AJAX加载页面并使用History API来解决这个问题：

Demo1

Answer 3

具有常识和/或足够的大脑来避免gayQuery ...

function uploadFile(){
    var form_data = new FormData();
    var first_file = document.getElementById('your_input_element_which_type_is_file').files[0];
    var link = 'file_upload.php'; /*or which ever you have, maybe add ?params=xxx&other_params=yyyy */
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var response = xmlhttp.responseText;
            /* check your custom response here */
            }
            /* check other errors here too */
        }
    form_data.append('file', first_file);
    xmlhttp.open('POST', link, true);
    xmlhttp.send(form_data);
    }

使用ajax

3 个答案: