如何修复的Ajax图片上传 - 响应返回的HTML没有图像 [英] How to fix Ajax Image Upload - response back is the HTML not image

问题描述

我打破试图顺着我的问题<一href="http://stackoverflow.com/questions/22180832/how-to-upload-image-via-ajax-in-jquery-to-python">upload通过Ajax的图像到Python 。

I'm breaking down my problem of trying to upload an image via Ajax to Python.

第1步：刚刚获得的阿贾克斯在页面上显示所选择的图片

我发现Zurb这个有趣的文章，其中似乎有例如code我需要： http://zurb.com/playground/ajax-upload

I found this interesting article on Zurb which seems to have the example code I need: 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本身页，而不是在图片

I'm implemented the plugin and setup things up, however the response that gets set to the src is the HTML page itself, rather then the image.

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

I'm noticing a similar problem on Zurb's website when I check what the src path of the thumb image is after uploading.

另外重复在我的jsfiddle这里： http://jsfiddle.net/leongaban/cd5Hy/1/

Also duplicated in my jsfiddle here: http://jsfiddle.net/leongaban/cd5Hy/1/

您可以看到我在哪里的问题呢？

Can you see where am I going wrong?

推荐答案

找到了答案在这里：阿贾克斯上传图片

$(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德赛

这篇关于如何修复的Ajax图片上传 - 响应返回的HTML没有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！