Question

如何使用请求ajax发送图像和表单？

HTML

public function someGetCollectionMethod()
{
    $products = Mage::getModel('catalog/product')->getCollection();
    Mage::getSingleton('core/resource_iterator')
              ->walk(
                   $products->getSelect(), 
                   array(array($this, 'productsCallback')));
}

public function productsCallback($args)
{
    $product = Mage::getModel('catalog/product');
    $prod = $product->load($args['row']['entity_id']);
    Zend_Debug::dump($prod->getSku());
}

JQuery - AJAX

<input type="text" class="form-control" id="Name"/>
<input type="file" name="imgClient" class="form-control" id="UploadIMG"/>

</form>

<button id="btnSave">Save</button>

当我序列化数据并发出警告显示时，我发现图片不存在，如何将图片与表单一起发送到$("#btnSave").click(function() { var Url = 'http://localhost/systemm/public/painel/client'; var Dados = $('#FormClient').serialize(); $.ajax({ type:Type, url: Url, dataType: 'JSON', data: Dados, success:function(data){ if($.isEmptyObject(data.error)) location.reload(); else printErrorMsg(data.error); }, error:function(e){ alert('Ocorreu um erro !'); console.log(e); }, }); });？

Answer 1

使用formData对象：

<强> HTML

<form enctype="multipart/form-data">
    <input type="text" class="form-control" id="Name" name="Name"/>
    <input type="file" name="imgClient" class="form-control" id="UploadIMG"/>
    <button id="btnSave">Save</button>
</form>

<强> JS

$("#btnSave").click(function() { 

    var Url = 'http://localhost/systemm/public/painel/client';

    var formData = new FormData(this.form);

    $.ajax({
        type:'post',
        url: Url,
        dataType: 'JSON',
        data: formData,
        ...

    });

});

Answer 2

尝试更改内容dataType。设置dataType='false'

 $.ajax({
    type:Type,
    url: Url,
    dataType: false,
    data: Dados,
    success:function(data){
        if($.isEmptyObject(data.error))
            location.reload();                      
        else        
            printErrorMsg(data.error);

    },
    error:function(e){
        alert('Ocorreu um erro !');
        console.log(e);
        },
    });

希望这有帮助

Answer 3

这就是我做的方式。

var obj = document.getElementById('my_form_id')
var data = new FormData(obj);
$.ajax({
    type: 'post',
    url: $(obj).parent().attr('action'),
    processData: false,
    contentType: false,
    data: data,
    success: function(result){
        profile_app.user.foto_url = result.url
    },
    error: function(error){
        console.log("error");
    }
});

Answer 4

让我们试试，

<form id="POST_FORM" method="post" enctype="multipart/form-data" >
    <input type="text" class="form-control" id="Name"/>
    <input type="file" name="imgClient" class="form-control" id="UploadIMG"/>
    <button type="submit" id="btnSave">Save</button>
</form>

$("#POST_FORM").submit(function(){
    var data = new FormData(this);
    addPOST(data);
    return false;
});

function addPOST(formData){
    $.ajax({
        type:'POST',
        url: Url,
        data:formData,
        dataType:"json",
        cache:false,
        contentType: false,
        processData: false,
        success:function(response){

        },
        error: function(data){
            console.log("error");
            console.log(data);
        }
    });
}

使用ajax和jquery上传文件和表单

4 个答案: