jUploader-1.0正在版:基于jQuery文件无刷新上传插件下载及介绍

责编:menVScode 2017-08-17 14:57 阅读(572)

         全局设置:

        下面的为下面的实例写的设置。

//全局配置(这样就不必每次初始化时都加上下面的设置)
$.jUploader.setDefaults({  
        cancelable : true,  //可取消上传
        allowedExtensions : [ 'jpg', 'png', 'gif' ],  //只允许上传图片
        messages : {  
            upload : '上传照片',  
            cancel : '取消上传',  
            emptyFile : "{file} 为空,请选择一个文件.",  
            invalidExtension : "{file} 后缀名不合法. 只有 {extensions} 是允许的.",  
            onLeave : "文件正在上传,如果你现在离开,上传将会被取消。"  
        }  
    });  


        实例(一):

        这个实例是放个预览图片,上传完后设置上传后的地址。

    $.jUploader({  
        button : 'upload-button1', // 这里设置按钮id  
        action : 'upload.aspx?test_cancel=1', // 这里设置上传处理接口,这个加了参数test_cancel=1来测试取消

        // 上传完成事件  
        onComplete : function(fileName, response) {  
            // response是json对象,格式可以按自己的意愿来定义,例子为: { success: true, fileUrl:'' }  
            if (response.success) {  
                $('#photo1').attr('src', response.fileUrl);  
                // 这里说明一下,一般还会在图片附近加添一个hidden的input来存放这个上传后的文件路径(response.fileUrl),方便提交到服务器保存
            } else {   
                alert('上传失败');  
            }  
        } 
    }); 

QQ截图20170817143956


        实例(二):

        这个实例是放个预览图片和loading图片,上传过程显示loading图片,上传完后给预览图片设置上传后的地址交显示。

    $.jUploader({  
        button : 'uploadPhoto', // 这里设置按钮id  
        action : 'uploadPhoto.action', // 这里设置上传处理接口  
  
        // 开始上传事件  
        onUpload : function(fileName) {  
            $('#photos').hide();  
            $('#loading').show();  
        },  
  
        // 上传完成事件  
        onComplete : function(fileName, response) {  
            // response是json对象,格式可以按自己的意愿来定义,例子为: { success: true, fileUrl:'' }  
            if (response.success) {  
                $('#loading').hide();  
                $('#photo').attr('src', response.fileUrl).show();  
            } else {  
                $('#photo').show();  
                $('#loading').hide();  
                alert('上传失败');  
            }  
        },  
  
        // 取消上传事件  
        onCancel : function(fileName) {  
            $('#photos').show();  
            $('#loading').hide();  
        }  
    }); 

QQ截图20170817144410


        实例(三):

        这个实例是放个预览图片,在上传按钮旁边放个span来提示上传信息。

2012033116200328

QQ截图20170817145211


        实例(四):

        这个实例是放个预览图片,用jBox来显示上传提示。

2012033116214357

QQ截图20170817145316
        

        参数说明

    2012033116312214

    jquery.jUploader-1.0.js下载链接:http://pan.baidu.com/s/1hslB9VA 密码:e6bo

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码