web

Posted 石头哥的青春

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web相关的知识,希望对你有一定的参考价值。

使用webuploader上传图片,对格式大小有限制。 
下面是我是用中的一些总结,有不对的地方,希望大佬们指出。技术分享 
废话不多说,下面正文 
文件大小限制

fileNumLimit: xx,//上传数量限制
fileSizeLimit: xx,//限制上传所有文件大小
fileSingleSizeLimit: xx,//限制上传单个文件大小

accept: {// 只允许选择图片文件格式

    title: ‘Images‘,
    extensions: ‘gif,jpg,bmp,png‘,
    mimeTypes: ‘image/*‘
},

提示信息 

type是错误编码。不清楚的错误可以打印出来看一下,使用的layer弹出提示、可以改的。

/**
* 验证文件格式以及文件大小
*/
uploader.on("error", function (type) {
    if (type == "Q_TYPE_DENIED") {
        layer.msg("请上传JPG、PNG、GIF、BMP格式文件");
    } else if (type == "Q_EXCEED_SIZE_LIMIT") {
        layer.msg("文件大小不能超过2M");
    }else {
            layer.msg("上传出错!请检查后重新上传!错误代码"+type);
    }
});

 

一些错误

我碰到还一种情况是要初始化的空间隐藏状态,控件没有初始化。解决方法是在控件显示出来后在调用一次函数,就是在初始化一次。

单张图片上传完后,想要修改再次上传图片是没有效果,我在网上查找到了 说加上duplicate: true 
但是我的还是没有效果,解决方法是上传完成后再次初始化控件。

源码如下,有明白问什么都同学还请告知一二。 
下面贴出全部代码。仅供参考

/**
 * @param url 地址
 * @param num 上传数量
 * @param totalSize 限制上传所有文件大小
 * @param singleSize 限制上传单个文件大小
 */
function initWebuploader(url,num,totalSize,singleSize,rootPath) {
    uploader = WebUploader.create({
        fileNumLimit: num,//上传数量限制
        fileSizeLimit: totalSize,//限制上传所有文件大小
        fileSingleSizeLimit: singleSize,//限制上传单个文件大小
        auto: true,
        // swf文件路径
        // swf: BASE_URL + ‘/js/Uploader.swf‘,
        // 文件接收服务端。
        server: url,
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建,可能是input元素,也可能是flash.
        pick: ‘#picker‘,
        // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
        resize: false,
        accept: {// 只允许选择图片文件格式
         title: ‘Images‘,
         extensions: ‘gif,jpg,bmp,png‘,
         mimeTypes: ‘image/*‘
         },
        duplicate: true
    });
    //上传每个文件之前设置额外参数
    uploader.on("uploadStart", function () {
    });
    uploader.on("startUpload", function () {
    });
    uploader.on("uploadSuccess", function (file, response) {
        $("#imgView").attr("src", rootPath + response);
        $("#photo").val(response);
        layer.msg("上传成功");
    });
    uploader.on("uploadFinished", function () {
        //layer.msg("上传成功")
        //多次上传,页面使用webuploader1来调用,实现多次上传效果
        // function initWebuploader1() {
         //    initWebuploader(...);
        // }
        uploader.destroy();
        initWebuploader(url,num,totalSize,singleSize,rootPath);
    });
    /**
     * 验证文件格式以及文件大小
     */
    uploader.on("error", function (type) {
        if (type == "Q_TYPE_DENIED") {
            layer.msg("请上传JPG、PNG、GIF、BMP格式文件");
        } else if (type == "Q_EXCEED_SIZE_LIMIT") {
            layer.msg("文件大小不能超过2M");
        }else {
            layer.msg("上传出错!请检查后重新上传!错误代码"+type);
        }

    });
}

以上是关于web的主要内容,如果未能解决你的问题,请参考以下文章

代码片段 - Golang 实现简单的 Web 服务器

高效Web开发的10个jQuery代码片段

高效Web开发的10个jQuery代码片段

web前端开发JQuery常用实例代码片段(50个)

几条jQuery代码片段助力Web开发效率提升

markdown 在Intel Nuc上设置Ubuntu Web服务器,步骤和代码片段