zoukankan      html  css  js  c++  java
  • vue+weui+FormData+XMLHttpRequest 实现图片上传功能

    首先是样式:https://weui.io/#uploader

    在weui示例中可以看到是用以下方法进行选择图片

    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>
    

      

     $uploaderInput = $("#uploaderInput");
     $uploaderInput.on("change", function(e){
                var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
    
                    if (url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }
    
                    $uploaderFiles.append($(tmpl.replace('#url#', src)));
                }
            });
    

     由于俺们用的vue,所以改造一下子

    <input @change="uploadInpuChange($event)" class="weui-uploader__input" type="file" accept="image/*" multiple=""/>
    

     在相关vue实例中加入如下方法

    uploadInpuChange: function (e) {
                let src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files, self = this;
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
                    if (url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    } 
              self.imgs.push({ url: "background-image: url(" + src + ")"});//这个src为一种。。啥类型来着,自个F12瞅瞅 //添加到数组 filesAry.push({ file: file }) }; }

     最后是展示

    <li  v-for="img in imgs" class="weui-uploader__file a-fadein" v-bind:style="img.url"></li>
    

     然后捏,就可以在此基础上做任何扩展操作啦,例如限制图片类型,数量鸭

    最后是提交图片,先全添加进formdata中

     let formdata = new FormData();
        filesAry.forEach(function (obj) {
            if (obj.file != null) {
                formdata.append('files', obj.file);//原项目一般回附带其他参数类型然后遍历做相关判断再添加
            }
        })
    

      

    然后使用XMLHttpRequest对象进行提交

    let xhr = new XMLHttpRequest();
        xhr.open('POST', location.href, true);
        xhr.send(formdata);
        xhr.onload = function (event) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                console.log(xhr.responseText);
             //okay
            }
            else {
            //no okay
            }
        };
    

      

    我采取的是一次性全部提交,也可以依照这个改造为一个个提交

  • 相关阅读:
    单例模式
    设计模式
    C#判断Textbox是否为数字
    C#判断输入的是否是汉字
    C#如何测试代码运行时间
    网上 server2008数据库恢复方法
    C# 控件的缩写
    SQLite主键自增代码
    Sqlite数据库联合查询及表复制等详述
    C#中超链接方法
  • 原文地址:https://www.cnblogs.com/ncellit/p/10675154.html
Copyright © 2011-2022 走看看