Opencart - 上传特定文件类型

Question

我正在使用OpenCart 1.5.6，并有两个选项供客户将文件上传到产品（图像和视频）。当用户点击上传时，我希望他们只能在浏览文件时从计算机中选择特定的文件类型。因此，而不是浏览器窗口中的“所有文件”，我希望它只允许.png，.jpg，.jpeg，.pdf等用于图像上传以及我只希望它查找的视频文件.mp4 ，.mov，.flv。

下面是一个例子：http://jsfiddle.net/VCdvA/

我曾尝试使用接受属性according to this post但它不工作。

这里是我的product.tpl代码：

<input type="button" accept="video/*,image/*" value="<?php echo $button_upload; ?>" id="button-option-<?php echo $option['product_option_id']; ?>" class="button" > 
    <input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" /> 

我觉得现在的问题是，它是类型=“按钮”，而不是类型=“文件”。是否有另一种方法来限制OpenCart产品页面中的上传文件类型？

Answer 1

问题是使用jQuery插件。这是AjaxUpload这似乎是由不同的开发人员（完全）和重做（完全）接管，并且原始（旧）文档的链接已经完全失效。

嗯，探索那jQuery插件，我发现，它以这种方式工作后：在ptoduct.tpl你可以看到：

<?php foreach ($options as $option) { ?> 
<?php if ($option['type'] == 'file') { ?> 
<script type="text/javascript"><!-- 
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', { 
    //... 
}); 
//--></script> 
<?php } ?> 
<?php } ?> 

这意味着，对于文件类型的每个选项这个AjaxUpload被实例化。基本上它只创建一个DIV，其中包含输入为0的不透明度的FILE类型的输入，该输出在上传文件按钮上方呈现。这意味着当用户点击上传文件时，他点击了FILE类型的INPUT（不知道这一点）。现在，看着我的代码可以看到，有没有可能设置该属性accept="image/*"因为有这个（原代码）不支持：

_createInput: function(){ 
     var self = this; 

     var input = document.createElement("input"); 
     input.setAttribute('type', 'file'); 
     input.setAttribute('name', this._settings.name); 

     addStyles(input, { 
      // ... 
     }); 

     // ... 
    }, 

所以，现在如果你想添加这个支持，你只需要修改这个代码这个（文件：catalog/view/javascript/jquery/ajaxupload.js，围绕线350）：

 var input = document.createElement("input"); 
     input.setAttribute('type', 'file'); 
     input.setAttribute('name', this._settings.name); 
     if (this._settings.accept) { 
      input.setAttribute('accept', this._settings.accept); 
     } 

而且在product.tpl更改插件initializiation代码：

<?php foreach ($options as $option) { ?> 
<?php if ($option['type'] == 'file') { ?> 
<script type="text/javascript"><!-- 
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', { 
    <?php if ($option['product_option_id'] == <IMAGE_FILE_OPTION_ID>) { ?> 
    accept: 'image/*', 
    <?php } else if ($option['product_option_id'] == <VIDEO_FILE_OPTION_ID>) { ?> 
    accept: 'video/*', 
    <?php } ?> 
    //... 
}); 
//--></script> 
<?php } ?> 
<?php } ?> 

这应该够了。