問題描述

我正在嘗試使用 jqgrid 實現(xiàn)文件上傳(在 Zend 框架項目中).jqgrid 允許您創(chuàng)建文件"類型的輸入字段，但不啟用 ENCTYPE=multipart/form-data".

I am trying to implement file upload with jqgrid (in a Zend Framework project). jqgrid allows you to create an input field of type "file" but does not enable ENCTYPE="multipart/form-data".

作者推薦使用其他插件來處理文件上傳，特別是Ajax File Upload.他說使用 onInitializeForm() 方法初始化它，但我不清楚具體如何做到這一點.他說，

The creator recommends using another plugin to handle file uploads, specifically Ajax File Upload. He says to initialize it using the onInitializeForm() method but exactly how to do this is not clear to me. He says,

"我建議你也可以使用 Ajax文件上傳插件并初始化它僅在 onInitializeForm 事件中出現(xiàn)一次."

"Also as I suggest you can use Ajax file upload plugin and intialize it only once in onInitializeForm event."

這就是有關(guān)如何執(zhí)行此操作的說明.

And that is about it for instructions on how to do this.

到目前為止我所做的:我有顯示文件輸入字段的 jqgrid 編輯表單，并且我已經(jīng)準(zhǔn)備好所有各種插件文件并正確加載.我無法弄清楚如何讓提交的表單正確上傳文件(我想我無法弄清楚如何使用 onInitializeForm 事件初始化 ajax 文件上傳插件").任何想法都非常感謝.

What I have done so far: I have the jqgrid edit form displaying the file input field and I have all of the various plugin files in place and loading properly. What I cannot figure out is how to get the submitted form to properly upload the file (I guess I can't figure out how to "initialize the ajax file upload plugin with the onInitializeForm event"). Any ideas are greatly appreciated.

我可以讓 onInitializeForm 觸發(fā)一些簡單的東西，比如 alert('test') 但每次加載網(wǎng)格時它都會觸發(fā)越來越多的數(shù)字(比如，第一次什么都沒有，下次加載時一個警報網(wǎng)格，下次有兩個警報，等等).

For what it is worth I can get onInitializeForm to trigger something simple like alert('test') but it triggers in growing numbers each time you load the grid (like, nothing first time, one alert the next time you load the grid, two alerts the next time, etc).

推薦答案

答案如下:

<!-- Add your other js files like jQuery, jqGrid etc. -->
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script language="javascript">
    $(function() {
        $(document).ready(function() {
            jQuery("#your_grid_id").jqGrid({
                url: 'your_url',
                datatype: 'json',
                mtype: 'post',
                pager: 'your_pager_id',
                colNames: ["Description", "File"],
                colModel: [{name: "desc", index: "desc", ... ... ...}, {name: "file_to_upload", index: "file_to_upload", edittype: "file", ... ... ...}]
            }).navGrid("#your_pager_id",{{... ... ...},{
                jqModal:true,closeAfterEdit: true,recreateForm:true,onInitializeForm : function(formid){
                    $(formid).attr('method','POST');
                    $(formid).attr('action','');
                    $(formid).attr('enctype','multipart/form-data');
                }, afterSubmit : function(response, postdata){
                       $.ajaxFileUpload({
                          url: 'your_file_url_where_upload_operates', 
                          secureuri:false,
                          fileElementId:'file_to_upload',
                          dataType: 'json',
                          success: function (data, status) {
                              alert("Upload Complete.");
                          }
                       });
                   }
                }},{
                jqModal:true,closeAfterAdd: true,recreateForm:true,onInitializeForm : function(formid){
                    $(formid).attr('method','POST');
                    $(formid).attr('action','');
                    $(formid).attr('enctype','multipart/form-data');
                }, afterSubmit : function(response, postdata){
                       $.ajaxFileUpload({
                          url: 'your_file_url_where_upload_operates', 
                          secureuri:false,
                          fileElementId:'file_to_upload',
                          dataType: 'json',
                          success: function (data, status) {
                              alert("Upload Complete.");
                          }
                       });
                   }
                }
            });
        });
    });
</script>

我使用 recreateForm: true 來確保在每次添加或編輯時重新創(chuàng)建表單.

I used recreateForm: true to ensure that on every Add or Edit the form is re-created.

如果您還有問題，請隨時問我.

If you have problem yet, please feel free to ask me.

這篇關(guān)于在 PHP 中使用 jqgrid 上傳文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！