线上 demo

• web 头像上传
• web 发布信息的图片上传

• wap 发布信息的图片上传

• 官渡图片和 flash 上传

基本需求

• 多文件上传
• 格式过滤
• 图片预览
• 图片处理
• 文件上传

多文件上传

         <input type="file" multiple>

多文件上传

IE < 10 , use flash

Android: not support

格式过滤

 <input type="file" multiple accept="image/*">

格式过滤

IE < 10, use flash 

Android: not support

before preview and upload: check file type (and size)

图片预览

    function preview(file) {
        var img = document.createElement('img')
        img.src = window.URL.createObjectURL(file)
        img.height = 60
        img.onload = function(e) {
            window.URL.revokeObjectURL(this.src)
        }
        return img
    }

more solutions: readAsDataURL etc

图片预览

IE < 10, use flash

Or, fetch image from server after upload

图片处理

camanJS

浏览器端：Canvas

IE < 9, use flash

图片处理

服务器端：（又拍云）

文件上传

    function uploadFiles(url, files) {
        var formData = new FormData()
        for (var i = 0, file; file = files[i]; ++i) {
            formData.append(file.name, file)
        }
        var xhr = new XMLHttpRequest()
        xhr.open('POST', url, true)
        xhr.onload = function(e) { ... }
        xhr.send(formData)  // multipart/form-data
    }
    
    var fileDom = document.querySelector('input[type="file"]')
    fileDom.addEventListener('change', function (e) {
        uploadFiles('/server', this.files)
    }, false)

more: progress, load event

tips: upyun do not support to upload multiple files at the same time.

文件上传

IE < 10, use flash

文件上传

xhr 跨域：

CORS

IE >= 10, it's OK

文件上传

flash 跨域：

crossdomain.xml

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <site-control permitted-cross-domain-policies="all"/>
    <allow-access-from domain="baixing.com" secure="false"/>
    <allow-access-from domain="*.baixing.com" secure="false"/>
    <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>

现有解决方案

• web uploader（plupload）
• FileAPI

功能都比较完善

支持 纯 HTML5 和 纯 FLASH

两种方案的比较

预览的比较

uploader = WebUploader.create({
    pick: {
        id: '#filePicker',
        multiple: true
    },
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    swf: BASE_URL + '/js/Uploader.swf'
})

uploader.onFileQueued = function(file) {
    uploader.makeThumb(file, function(error, src) {
        var img = document.createElement('img')
        img.src = src
        previewDom.append(img)
    }, 100, 100)
}

预览的比较

<a class="js-fileapi-wrapper">
    <input type="file" id="test" multiple accept="image/*">
</a>

FileAPI.event.on(testDom, "change", function (evt) {
    var files = FileAPI.getFiles(evt)
    FileAPI.each(files, function (file) {
        createPreview(file)
    })
})

var createPreview = function (file) {
    FileAPI.Image(file).
        preview(100).
        get(function (err, image) {
            if(!err) {
                previewDom.appendChild(image)
            }
        })
}

上传的比较

var uploader = WebUploader.create({
    ...,
    auto: true,
    server: 'http://webuploader.duapp.com/server/fileupload.php'
}）

uploader.on('uploadBeforeSend', function (object, data, header) {
    data.policy = policy
    data.signature = signature
})

uploader.on('uploadComplete', function(file) {
    ...
})

上传的比较

var uploadOpts = {
    url: 'http://v0.api.upyun.com/ustccjw-uploader/',
    cache: true,
    name: 'file'
}
function uploadFile (file) {
    var opts = FileAPI.extend(uploadOpts, {
        files: {},
        data: {
            policy: policy,
            signature: signature
        },
        filecomplete: function (err, xhr, file) {
            ...
        }
    })
    opts.files[opts.name] = file
    FileAPI.upload(opts)
}

两种方案的比较

web uploader:         object, config, event

FileAPI:                    mock standard API

THX