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="" />

我认为问题在于它是type =“button”而不是type =“file”。是否有其他方法可以限制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，其包含FILE类型的INPUT，其0不透明度在上载文件按钮上方呈现。这意味着当用户点击上传文件时，他会点击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中的插件初始化代码更改为：

<?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 } ?>

这应该足够了。

Opencart - 上传特定文件类型

1 个答案: