zoukankan      html  css  js  c++  java
  • ssi-uploader上传图片插件,点击选择文件按钮自动提交表单解决办法

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

    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');
            });
    

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

     转载请注明地址谢谢:http://www.cnblogs.com/wu-yun-jiang/p/6289206.html

  • 相关阅读:
    libusb简介
    STM8S和STM8L调试串口中断的注意点
    QT 5.1.1 for Android 开发环境搭建与配置【Windows 7】
    【Luogu3806】点分治(点分治)
    NOIP2017+停课总结
    【BZOJ2301】【HAOI2011】Problem B(莫比乌斯反演)
    【Luogu3455】【POI2007】ZAP-Queries(莫比乌斯反演)
    【HDU1695】GCD(莫比乌斯反演)
    【BZOJ2816】【ZJOI2012】网络(Link-Cut Tree)
    莫比乌斯反演
  • 原文地址:https://www.cnblogs.com/wu-yun-jiang/p/6289206.html
Copyright © 2011-2022 走看看