JavaScript多文件上传及图片预览

  • 多文件上传:

    var xhr = new XMLHttpRequest,
        fd = new FormData,
        i = 0;
    //files: $('input[type=file]')[0].files
    for (; i < files.length; i++) {
        fd.append('files[]', files[i]);
    }
    xhr.open('POST', '···.php');
    xhr.onreadystatechange = function() {
        if (this.status == 200 && this.readyState == 4) {
            console.log(this.responseText)
        }
    }
    xhr.send(fd);
    
  • 上传图片预览:

    //file: $('input[type=file]')
    file.on('change', function() {
        var reader = new FileReader;
        reader.onload = function(e) {
            img.src = this.result;
        }
        reader.readAsDataURL(this.files[0]);
    })
    
  • 相关链接:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,117评论 1 10
  • 在很多情况下我们用 input[type="file"] 上传图片的时候都希望有一个预览效果,最后才会将表单一起提...
    Sharise_Mo佩珊阅读 3,674评论 8 11
  • H5 meta详解 viewport width:控制 viewport 的大小,可以指定的一个值,如果 600,...
    FConfidence阅读 844评论 0 3
  • 个人博客:https://yeaseonzhang.github.io 花了半个多月的时间,终于又把“JS红宝书”...
    Yeaseon阅读 1,800评论 2 23
  • 终于放假了,三天,开心的要飞起来。可是就是那天晚上,肚子居然一直涨,我一晚上都没有睡着,妈妈叫我吃早饭的时候眼睛都...
    蜂蜜芥末兔阅读 348评论 0 0