javascript - jqgrid - upload a file in addedit dialog - Stack Overflow

admin管理员组

文章数量:1289496

I'm new to jqgrid and I have learn many things through your answer.
Now I have a problem: I want to upload files when adding or modifying records to a jqgrid?

This is my code:

{
    name: 'File',
    index: 'file',
    hidden: true,
    enctype: "multipart/form-data",
    editable: true,
    edittype: 'file',
    editrules: {
        edithidden: true,
        required: true
    },
    formoptions: {
        elmsuffix: '*'
    }
}

However the field I got in controller always be null :(. Any suggestion
Anyone know working example?
Thanks in advance

UPDATE
I have found a very good example at

I'm new to jqgrid and I have learn many things through your answer.
Now I have a problem: I want to upload files when adding or modifying records to a jqgrid?

This is my code:

{
    name: 'File',
    index: 'file',
    hidden: true,
    enctype: "multipart/form-data",
    editable: true,
    edittype: 'file',
    editrules: {
        edithidden: true,
        required: true
    },
    formoptions: {
        elmsuffix: '*'
    }
}

However the field I got in controller always be null :(. Any suggestion
Anyone know working example?
Thanks in advance

UPDATE
I have found a very good example at http://tpeczek.codeplex./releases

• javascript
• jquery
• jqgrid

Share Improve this question Follow edited Oct 20, 2011 at 14:37 Tomasz Nurkiewicz 341k7171 gold badges712712 silver badges679679 bronze badges asked Sep 26, 2011 at 3:06 DranixDranix 55144 gold badges1111 silver badges2121 bronze badges 2

• 2 Your link makes sends me in a such page where I did not find any clue as you told that its a good example. – Tareq Commented Sep 29, 2011 at 11:25
• Download jqGrid in ASP.NET MVC – Editing, TinyMCE, Upload (tpeczek.codeplex./releases/view/63305). It's a working version – Dranix Commented Oct 12, 2011 at 7:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I got it working just yesterday..here's my colModel column for file upload,

{
    name: 'fileToUpload',
    index: 'customer_id',
    align: 'left',
    editable: true,
    edittype: 'file',
    editoptions: {
        enctype: "multipart/form-data"
    },
    width: 210,
    align: 'center',
    formatter: jgImageFormatter,
    search: false
}

You have to set afterSubmit: UploadImage. It uploads the file only after data has been post & response has e back. I'm checking here that if insert was succesfful then only start upload else show error. I've used Jquery Ajax File Uploader.

function UploadImage(response, postdata) {

    var data = $.parseJSON(response.responseText);

    if (data.success == true) {
        if ($("#fileToUpload").val() != "") {
            ajaxFileUpload(data.id);
        }
    }  

    return [data.success, data.message, data.id];

}

function ajaxFileUpload(id) 
{
    $("#loading")
    .ajaxStart(function () {
        $(this).show();
    })
    .ajaxComplete(function () {
        $(this).hide();
    });

    $.ajaxFileUpload
    (
        {
            url: '@Url.Action("UploadImage")',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            data: { id: id },
            success: function (data, status) {

                if (typeof (data.success) != 'undefined') {
                    if (data.success == true) {
                        return;
                    } else {
                        alert(data.message);
                    }
                }
                else {
                    return alert('Failed to upload logo!');
                }
            },
            error: function (data, status, e) {
                return alert('Failed to upload logo!');
            }
        }
    )          }                                                                                            

本文标签： javascriptjqgridupload a file in addedit dialogStack Overflow