ssi-uploader上传图片插件，点击选择文件按钮自动提交表单解决办法

Posted 2020-08-28 wu_yun_jiang

先介绍一下这款插件，然后再谈使用中可能遇到的问题

ssi-uploader是一个JQuery的图片上传插件，界面比较美观

 

github地址：https://github.com/ssbeefeater/ssi-uploader

演示地址：http://ssbeefeater.github.io/#ssi-uploader/examples

使用文档：http://ssbeefeater.github.io/#ssi-uploader/documentation

这里就不说明怎么使用了，github上面提供有，官网文档上面也有

 

本博文主要说两个问题，也是我使用时碰到的，后续碰到问题在来补充

1、中文显示问题（虽然官方说支持中文，但在js文件源码中并没有写这块儿的代码）

2、当点击选择文件时，自动提交表单<form>的action地址

 

问题1解决办法：

使用文本编辑器（或任何一款代码编辑器）打开ssi-uploader.js文件，滑动至文档几行最后，会看到只有en英文，和希腊文，

在locale添加如下代码，注意添加逗号。

,
zh_CN: {
            success: ‘成功‘,
            sucUpload: ‘上传成功‘,
            chooseFiles: ‘选择文件‘,
            uploadFailed: ‘上传失败‘,
            serverError: ‘服务器内部错误‘,
            error: ‘错误‘,
            abort: ‘终止‘,
            aborted: ‘已经终止‘,
            files: ‘文件‘,
            upload: ‘上传‘,
            clear: ‘清空‘,
            drag: ‘将文件拖放到这里‘,
            sizeError: ‘文件$1，超过限制大小$2‘,// $1=file name ,$2=max ie( example.jpg has has exceed the size limit of 2mb)
            extError: ‘不支持$1类型的文件‘,//$1=file extension ie(exe files are not supported)
            someErrorsOccurred: ‘发生了一些错误‘
        }

然后在使用时这样即可，注意第五行

$(‘#ssi-upload‘).ssi_uploader({
        url: ‘#‘,
        preview: false,
        maxNumberOfFiles: 1,
        locale: "zh_CN",
        allowed: [‘jpg‘, ‘gif‘, ‘txt‘, ‘png‘, ‘pdf‘]
    });

　　

 问题2解决办法：

根本原因我没有找到，不过我找到一种方法可以解决

首先在html文档中，给input添加属性data-validate="required:" ，即不可无值

<input data-validate="required:" type="file" multiple id="ssi-upload" />

然后修改ssi-uploader.js文件的67行，将

$input.on(‘change‘, function () { //choose files
            thisS.toUploadFiles(this.files);
            $input.val(‘‘);
        });

　　改为

$input.on(‘change‘, function () { //choose files
            thisS.toUploadFiles(this.files);
            $input.val(‘a‘);
        });

 

 网上这个问题信息比较少，所以希望对大家有帮助，后续遇到问题还会补充

 

 转载请注明地址谢谢