upload file in add/edit from of jqgrid? - forms

Question

I use jqgrid, when i add a row, i want push a file on the server.
I have read many many post, but i don't find a working example.
Many example don't work from jquery 1.5.
I found people who council:
http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html#api
http://malsup.com/jquery/form/#file-upload
But, i don't knows howto use this with jqgrid.
Someone could give me a complete example of a solution to upload a file with jqgrid?
Thank,

Answer 1

Well, i have find:
<script type="text/javascript" src="/static/jqueryform/jquery.form.js"></script>
<script type="text/javascript"> $(function(){
$("#citype").jqGrid({ url:"/api/citype/getdata",
datatype:'json',
mtype:'POST',
colNames:['No', 'Name', 'Icon'],
colModel :[
{ name:'id',
index:'id',
width:55,
editable:false,
key:true,
hidden:true
},
{
name:'name',
index:'name',
width:55,
editable:true
},
{
name:'icon',
index:'icon',
edittype:'file',
width:80,
align:'right',
editable:true},
],
pager:'#pager',
rowNum:10,
rowList:[10,20,30],
sortname:'citype_id',
sortorder:'desc',
viewrecords:true,
gridview:true,
caption:'List',
useDataProxy: true,
dataProxy : function (opts, act) {
opts.iframe = true;
var $form = $('#FrmGrid_citype'); //use name of the grid
//Prevent non-file inputs double serialization
var ele = $form.find('INPUT,TEXTAREA,SELECT').not(':file');
ele.each(function () {
$(this).data('name', $(this).attr('name'));
$(this).removeAttr('name');
});
//Send only previously generated data + files
$form.ajaxSubmit(opts);
//Set names back after form being submitted
setTimeout(function () {
ele.each(function () {
$(this).attr('name', $(this).data('name'));
jQuery("#citype").trigger('reloadGrid');
});
}, 200);
},
editurl:"/submit"
});
// Action Option jQuery("#citype").jqGrid('navGrid','#pager',
{}, //options
{ // edit options
closeAfterEdit:true,
height:280,
reloadAfterSubmit:true,
closeOnEscape : true,
useDataProxy: true,
onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}
},
{ // add options
closeAfterAdd:true,
height:280,
reloadAfterSubmit:true,
closeOnEscape : true,
useDataProxy: true,
onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}
},
{ // del options
reloadAfterSubmit:true
},
{} // search options );