Git Product home page Git Product logo

front-qn-uper's Introduction

小巧的前端七牛上传工具

介绍

不依赖任何第三方库

如何使用

客户端

var options = {
	//must
	domain: '七牛分配给你的域名', 

	//must
	tokenUrl: '你的服务器上获取uptoken的访问地址', 
	maxImgSize: '最大图片大小',  //option

	// option , 比如: 'font-qn-uper/'. 访问地址就是:http:domain/prefix/filename
	prefix: '自定义的路径',

	//option, 默认5000ms
	timeout: '请求超时时间' ,

	//option, 默认480px
	maxMobileWidth: '在手机上最大显示宽度',

	//option, 默认960px
	maxPcWidth: '在pc端最大显示宽度',

	//option, 格式比如: "jpg, png, jpeg"
	imageType: "文件类型"
}
var ins = new fontQnUper(options);
$('#upload').on('change', function() {
	var file = this.files[0];

	// 错误捕捉
	ins.errHandle = function(e) {
		console.log(e);
	}

	ins.post(file, function(result) {
		/*result datas
			{
				hash: "", 
				key: "", 
				fullImageUrl: "完整的上传图片",
				mobileImageUrl:"手机上显示的图片",
				pcImageUrl:"pc端显示的图片"
			}
		*/
	});
	// 上传进度, total: 一共上传的数据, loaded: 已经上传的数据(bytes)
	ins.progress = function(total,loaded){
         //do something 
    }
});

服务器

注意事项 本人使用的是基于Meteor的服务端, 如果你换为Nodejs, 可以改一下配置

  • 比如获取json文件的配置
  • 路由配置的修改

配置文件说明

三个参数, 分别是: BUCKET_NAME, ACCESS_KEY, SECRET_KEY 就是你定义的空间以及七牛提供给你的访问秘钥

front-qn-uper's People

Contributors

strucoder avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.