如何使用ajax上传文件答案

【问题标题】：How to upload file using ajax如何使用ajax上传文件
【发布时间】：2012-04-20 18:43:21
【问题描述】：

我试图在不更改网页的情况下将单个文件发送到服务器。我决定使用这个插件：http://cmlenz.github.com/jquery-iframe-transport/ 我对如何在不更改网页的情况下进行上传感到非常困惑...... uploadimg.php 返回：

<br />
<b>Notice</b>:  Undefined index: photo in <b>C:\website\uploadimg.php</b> on line <b>2</b><br />
<br />
<b>Notice</b>:  Undefined index: photo in <b>C:\website\uploadimg.php</b> on line <b>3</b><br />
<img src="userimg/" />

我的文件：

postAd.php

<html>
<head>
<script src="jquery.js"></script>
<script src="jquery-iframe-transport.js"></script>
<script>
$(document).ready(function(){
    $('#photo1').on('change', function(){
        $.ajax({
            url: "uploadimg.php",
            files: $("#photo1:file"),
            iframe: true,
            processData: false
        }).done(function(data){
            console.log(data);
        });
    });
});
</script>
</head>
<body>
<input type='file' name='photo' id='photo1' /></br>
</body>
</html>

上传img.php

<?php 
$file_tmp = $_FILES['photo']['tmp_name'][0];
$file = $_FILES['photo']['name'][0];
move_uploaded_file($file_tmp, "userimg/$file");
echo '<img src="userimg/' .$file .'" />';
?>

【问题讨论】：

标签： ajax file upload

【解决方案1】：

您没有提交表单，因此“照片”字段不会随 AJAX 调用一起发送。如果您有可用的调试器，请检查 $_FILES 数组以查看填充的内容。从this 看来，您可能正在寻找“用户文件”索引，但我不确定。

【讨论】：

【解决方案2】：

function upload(event) {

var formData = new FormData($('#uploadForm')[0]);

$.ajax( {             
    url     : "upload.do",
    type        : "POST",
    data    : formData,
    cache   : false,
    contentType     : false,
    processData : false,

});

@RequestMapping(value = "/uploadCsr", method = RequestMethod.POST)
    @ResponseBody
    public String uploadCsr(@RequestParam("fileUpload") MultipartFile file, HttpServletResponse response) {
// read the file using inputstream

}

【讨论】：

【解决方案3】：

经过大量搜索后，我发现使用 ajax 上传文件很简单。你可以在upload in php without refreshing找到它

【讨论】：