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

我认为问题在于它是 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 都会被实例化。基本上，它只创建一个包含 FILE 类型的 INPUT 且透明度为 0 的 DIV，该 DIV 在 Upload File 按钮上方呈现。这意味着当用户点击 Upload 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中的插件初始化代码更改为：

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

这应该足够了。