通过带有jQuery Easy ui的ajax上传文件

Question

I'm trying to give users the possibility to import data from a file that is located on their computer by using jQuery EasyUI form widget :

<form id="my_form" method="POST">
    <input type="file" name="my_file" id="my_file" />
</form>

var file_name = $('#my_file').val();

if(file_name)
{       
    $('#my_form').form('submit', {
        url: [url_to_call],
        onSubmit: function(param){
             param.file_path = file_name;
        }
    });
}

Then when the user browse on his/her computer for the file, I wanna send the path to a jQuery ajax query to perform some upload action. The problem I have is that filename returns something like this:

C:\fakepath\[name_of_file]

Because of the fakepath string, I am not getting the real path to where the file is located on the user's computer. Does anybody know how I can fix this issue please?

Thank you

Answer 1

Tried this plugin http://malsup.com/jquery/form/#getting-started

this plugin provide a method called AjaxSubmit() which work fine for upload the image. I have used it in 2011.

it's have some issue in IE (old version like 6,7). You need to write some hacks. on the backend Firefox and IE upload the correct file-stream format like Data/Image but in Chrome (Webkit) you will got Octet Stream. You need to parse the file format on server to check that file is not wrong.

Answer 2

I have no idea what your form() function does, as no such method exists in jQuery, but the usual way of uploading a file to the server would be something like this :

$('#my_file').on('change', function() {
    $.ajax({
        url  : [url_to_call],
        data : new FormData($('#my_form').get(0)),
        processData: false,
        contenttype: false
    }).done(function(param) {
        param.file_path = file_name;
    });
});