不积跬步,无以至千里;不积小流,无以成江海。

Dean's blog

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

使用fine-uploader上传文件

FineUploader是一个功能强大的纯js文件上传库,它提供了强大的功能,使用它完全可以胜任日常的文件上传工作,唯一不太利好的是,主要的文档都是英文的,对我这种英文不好的,就比较吃力了。

为了忘却的记忆,记录下使用FineUploader上传文件的一般设置:

var uploadFile = new qq.FineUploaderBasic({
    debug: true,        							//开启调试模式
    multiple: false,    							//多文件上传
    button: document.getElementById("upload"),   				//上传按钮
    autoUpload: true, 								//不自动上传则调用uploadStoredFiless方法 手动上传
    validation: {
        sizeLimit: 1000 * 1024,							//单位:byte,插件以1000计算而不是1024
        allowedExtensions: [".jpg", ".gif"]					//允许的文件格式
    },
    request: {
        endpoint: '/api/common/upload/upload',  				//接口地址
        inputName: "file"                           				//file对应的key
    },
    callbacks: {
        onSubmit: function (id, fileName) {					//选择文件后
            alert("开始提交");
        },
        onError: function (id, name, reason, maybeXhrOrXdr) {			//上传失败
            alert("上传异常");
        },
        onComplete: function (id, fileName, responseJSON) {			//上传完成后
            alert("上传成功");
            console.log("responseJSON", responseJSON);
        }
    },
    text: {
        fileInputTitle: "文件上传测试"						//文件上传按钮的提示
    }
});

上面的例子可以看到,find-uploader暴露了一个全局变量(qq),相关的配置也有做了说明。如果使用ASP.NET作为后端代码,可以使用Request.Files["file"]来接收上传的文件,其中“file”就是配置的request.inputName的值,这个值默认值是qqfile。

如果希望上传大文件,使用IIS时,可以参考“ASP.NET文件上传大小限制设置”。

 

不允许评论
粤ICP备17049187号-1