图片上传不工作与jQuery / AJAX [英] Image uploader not working with JQuery/ajax

问题描述

我想上传使用Ajax和jQuery和Perl是脚本语言服务器上的文件。

I am trying to upload a file on server using Ajax and jquery and perl is scripting language.

这是在code来选择文件。

This is the code for selecting a file.

<input id="avatar" type="file" name="avatar" />
<button type='button' id='fileUpload' class='btn btn-primary btn-sm'>
      <span class='glyphicon glyphicon-upload'></span> 
      Start Upload
</button>

这是$ C $下使用jQuery调用上载脚本。

And this is the code for calling upload script using jquery.

$('#fileUpload').click(function() 
{

    alert ('reached here');
    var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field
    var form_data = new FormData(); // Creating object of FormData class
    form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data

    $.ajax({
        url: "upload.pl",
        dataType: 'html',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data, // Setting the data attribute of ajax with file_data
        type: 'post',
        success : function(response)
        {
            alert ("success");
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) 
        { 

          alert ("script error");


        }, // error 
    });
});

图片文件获取服务器上创建的，但大小是空的。

Image file is getting created on the server but size is empty.

我敢肯定有在upload.pl没有问题，因为如果使用表单上传图像，然后它的做工精细和图像文件，确切的大小IM是越来越保存在服务器上。

I'm sure there is no issue in upload.pl because if i m using form to upload image then its working fine and image file with exact size is getting saved on the server.

<form action="upload.pl" method="post" enctype="multipart/form-data">
        <p>Photo to Upload: <input type="file" name="avatar" /></p>
        <p><input type="submit" name="Submit" value="Submit Form" /></p>
    </form>

可以请人帮我，为什么它不工作的情况下的Ajax / jQuery的呢？

Can please someone help me why it is not working in case of Ajax/jquery?

推荐答案

在名称参数的值是文件在你的AJAX请求，但头像对你的日常形式的要求。您可以使用开发工具为你喜欢的浏览器，并检查请求验证这一点。您还没有显示你的Perl code，但几乎可以肯定是你的问题的原因。

The value of the name parameter is file in your AJAX request but avatar in your regular form request. You can verify this using the developer tools for your favorite browser and inspecting the requests. You haven't shown your Perl code, but this is almost certainly the cause of your issue.

为了证明这一点，我可以用你的JavaScript code成功地上传一个文件，下面的CGI脚本（基于对的处理文件上传）：

As proof, I was able to successfully upload a file using your JavaScript code and the following CGI script (based on the documentation for processing a file upload):

use strict;
use warnings;

use CGI;

my $q = CGI->new;

my $lightweight_fh = $q->upload('file');

if (defined $lightweight_fh) {
    # Upgrade the handle to one compatible with IO::Handle:
    my $io_handle = $lightweight_fh->handle;

    open my $out_fh, '>>', 'file' or die "Failed to open file: $!";

    my $buffer;
    while (my $bytesread = $io_handle->read($buffer,1024)) {
        print $out_fh $buffer;
    }
}

print $q->header,
      $q->start_html,
      $q->p('Success'),
      $q->end_html;

这篇关于图片上传不工作与jQuery / AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！