如何修复Ajax图像上传 - 响应是HTML而不是图像

Question

我打破了尝试upload an image via Ajax to Python的问题。

第1步：只需让Ajax在页面上显示所选图像。

我在Zurb上发现了这篇有趣的文章，似乎有我需要的示例代码： http://zurb.com/playground/ajax-upload

$(document).ready(function() {

var thumb = $('img#thumb');        

new AjaxUpload('imageUpload', {
    action: $('form#newHotnessForm').attr('action'),
    name: 'image',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

我已经实现了插件并进行了设置，但是设置为src的响应是 HTML页面本身，而不是图像

我在Zurb的网站上注意到类似的问题，当我检查上传后拇指图像的src路径是什么时。

在我的jsfiddle中也重复： http://jsfiddle.net/leongaban/cd5Hy/1/

你能看到我哪里出错吗？

Answer 1

您可能没有采取正确的上传行动。

尝试创建将在服务器端处理图像的PHP文件，然后返回服务器上已有的图像数据：

<?php 
    $file = $_FILES['image']; // 'image' as you've set it in js code
    $path = 'http://example.com/images/'; //path on the server where you gonna store your images. Remember to set proper directory permissions.
    $location = $path. $_FILES["file"]["name"]; //this is where the file will go
    move_uploaded_file($_FILES["file"]["tmp_name"], $location); // move the file there
    echo $location; //send the file location back to the javascript
?>

现在，如果您想在将图片加载到服务器之前显示预览，请尝试HTML5 file upload handler

Answer 2

在这里找到答案：Ajax Upload image

$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));
 });

按 Sohil Desai