在 PHP 中使用 jqgrid 上传文件

2021-12-29 00:00:00 jquery php zend-framework jqgrid

我正在尝试使用 jqgrid 实现文件上传(在 Zend 框架项目中).jqgrid 允许您创建文件"类型的输入字段，但不启用 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 事件中出现一次."

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

这就是有关如何执行此操作的说明.

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

到目前为止我所做的:我有显示文件输入字段的 jqgrid 编辑表单，并且我已经准备好所有各种插件文件并正确加载.我无法弄清楚如何让提交的表单正确上传文件(我想我无法弄清楚如何使用 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 触发一些简单的东西，比如 alert('test') 但每次加载网格时它都会触发越来越多的数字(比如，第一次什么都没有，下次加载时一个警报网格，下次有两个警报，等等).

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 来确保在每次添加或编辑时重新创建表单.

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.

相关文章