如何使用带有Symfony2的ajax / jQuery上传文件

时间:2015-10-22 14:16:16

标签: javascript php jquery ajax symfony

有人可以帮助我吗?

我试图编写一个脚本,当用户点击图片时,这会触发数据库中的图像进行更新。

为此,我编写了暂时在控制器中生成方法的调用者行的代码,但是当我发送表单时,由于Cross-Site-Request-Forgery而未对其进行验证。

import numpy as np
import theano
import theano.tensor as T

X = theano.shared(np.arange(100),borrow=True,name='X')
index = T.scalar(dtype='int32',name='index')
X_slice = X[index:index+5]

get_tutorial = theano.function([index], X, givens={X: X[index:index+5]}, mode='DebugMode')
get_nogivens = theano.function([index], X_slice, mode='DebugMode')



> theano.printing.debugprint(get_tutorial)
DeepCopyOp [@A] ''   4
 |Subtensor{int32:int32:} [@B] ''   3
   |X [@C]
   |ScalarFromTensor [@D] ''   0
   | |index [@E]
   |ScalarFromTensor [@F] ''   2
     |Elemwise{add,no_inplace} [@G] ''   1
       |TensorConstant{5} [@H]
       |index [@E]

> theano.printing.debugprint(get_nogivens)
DeepCopyOp [@A] ''   4
 |Subtensor{int32:int32:} [@B] ''   3
   |X [@C]
   |ScalarFromTensor [@D] ''   0
   | |index [@E]
   |ScalarFromTensor [@F] ''   2
     |Elemwise{add,no_inplace} [@G] ''   1
       |TensorConstant{5} [@H]
       |index [@E]

这是我的来电线ajax,是以FormData的形式进行处理发布,捕获路由和令牌。他调用路由,但不确定图像是否正常,即使使用Inspector Firefox也是如此。

$("#upload_picture").on('click', function (e) {
    e.preventDefault();
    $("#bundle_user_file").trigger('click');
});

$("#bundle_user_file").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.active-img').attr('src', e.target.result);
        };
        reader.readAsDataURL(this.files[0]);
        ajax_formData()
    }
});

}

这是控制器中的方法,它通过一个通用调用点击按钮提交更改我的图像。但正如我在ajax电话会议前所说,他回答称令牌不可用

function ajax_formData() {
     var at = $("form[name=bundle_user]");
     var formData = new FormData();
     formData.append('file', $("input[type=file]")[0].files[0]);
     var url = at.attr('action') + '?_token=' + $("#bundle_user__token").val();
     $.ajax({
         type: "PUT",
         url: url,
         data: formData,
         success: function (data) {
             alert("success: " + data.message);
         },
         fail: function (data) {
             alert("error: " + data.message);
         },
         cache: false,
         contentType: false,
         processData: false,
         xhr: function () {  // Custom XMLHttpRequest
             var myXhr = $.ajaxSettings.xhr();
             if (myXhr.upload) { // Avalia se tem suporte a         propriedade upload
                 myXhr.upload.addEventListener('progress', function ()               {
                 /* faz alguma coisa durante o progresso do upload */
             }, false);
         }
         return myXhr;
     }
 });

2 个答案:

答案 0 :(得分:2)

首先,我注意到#upload_image的click事件触发了#bundle_user_file上的单击触发器,但是在下面你要求它查找更改事件。因此,这无济于事。

如果需要,可以通过调用csrf token_manager服务重新生成CSRF令牌:

/** @var \Symfony\Component\Security\Csrf\CsrfTokenManagerInterface $csrf */
$csrf = $this->get('security.csrf.token_manager');
$token = $csrf->refreshToken($tokenId);

return new Response($token);

如果需要,您可以在表单中确定$ tokenId,或者只使用您的图片ID,或其他任何内容。通常,CSRF令牌会自动从您的会话生成,因此您可能也想检查它。

答案 1 :(得分:0)

function upload_img(){
        var file_data = $('.myform').find('.drawing').prop("files")[0];
        var form_data = new FormData();       
        form_data.append("drawing", file_data);
        $.ajax({
            url: "upload.php",
            type: "POST",
            data:  form_data,
            contentType: false,
            dataType:'json',
            cache: false,
            processData:false,
            success: function(data)
            {   
            },
              error: function() 
            {
            }             
       });
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <form class='myform'>
  <input type='file' class='drawing' onchange='upload_img()' >
</form>