mui 上传文件或图片中使用了feedback-page.js,这个JS要怎么使用呢?应该怎么通过它来取值呢?

发布于 2022-09-05 10:38:33 字数 3490 浏览 16 评论 0

//feedback-page.js的原码,可以使用,但是不知道怎么取files

(function(mui, window, document, undefined) {
    mui.init();
    var get = function(id) {
        return document.getElementById(id);
    };
    var qsa = function(sel) {
        return [].slice.call(document.querySelectorAll(sel));
    };
    var ui = {
        question: get('question'),
        contact: get('contact'),
        imageList: get('image-list'),
        submit: get('submit')
    };
    ui.clearForm = function() {
        ui.question.value = '';
        ui.contact.value = '';
        ui.imageList.innerHTML = '';
        ui.newPlaceholder();
    };
    ui.getFileInputArray = function() {
        return [].slice.call(ui.imageList.querySelectorAll('input[type="file"]'));
    };
    ui.getFileInputIdArray = function() {
        var fileInputArray = ui.getFileInputArray();
        var idArray = [];
        fileInputArray.forEach(function(fileInput) {
            if (fileInput.value != '') {
                idArray.push(fileInput.getAttribute('id'));
            }
        });
        return idArray;
    };
    var imageIndexIdNum = 0;
    ui.newPlaceholder = function() {
        var fileInputArray = ui.getFileInputArray();
        if (fileInputArray &&
            fileInputArray.length > 0 &&
            fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
            return;
        }
        imageIndexIdNum++;
        var placeholder = document.createElement('div');
        placeholder.setAttribute('class', 'image-item space');
        var closeButton = document.createElement('div');
        closeButton.setAttribute('class', 'image-close');
        closeButton.innerHTML = 'X';
        closeButton.addEventListener('click', function(event) {
            event.stopPropagation();
            event.cancelBubble = true;
            setTimeout(function() {
                ui.imageList.removeChild(placeholder);
            }, 0);
            return false;
        }, false);
        var fileInput = document.createElement('input');
        
        fileInput.setAttribute('type', 'file');
        fileInput.setAttribute('accept', 'image/*');
        fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
        fileInput.addEventListener('change', function(event) {
            var file = fileInput.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function() {
                    //处理 android 4.1 兼容问题
                    var base64 = reader.result.split(',')[1];
                    var dataUrl = 'data:image/png;base64,' + base64;
                    //
                    placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
                }
                reader.readAsDataURL(file);
                placeholder.classList.remove('space');
                ui.newPlaceholder();
            }
        }, false);
        placeholder.appendChild(closeButton);
        placeholder.appendChild(fileInput);
        ui.imageList.appendChild(placeholder);
    };
    ui.newPlaceholder();
})(mui, window, document, undefined);

我应该怎么把 file 取出来呢?谢谢!
实际上应该取这个值 fileInputArray,它是一个数组,如果选择多个图片的话,就要选择它。
搞不定,应该怎么使用?

<!--upload-->
<div id="feedback" class="mui-page feedback">
    <div class="mui-page-content">
        <div id='image-list' class="row image-list"></div>
    </div>
</div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

欢你一世 2022-09-12 10:38:33

var file = fileInput.files[0];就是file,js写的话
var files = document.getElementById('file').files[0];
单张图片的话加files[0],多张的话就是files,
预览图片的话

            function change(ev){    //file input change事件
                var event = window.event || ev;
                var files = event.target.files;
             for(var i=0;i<files.length;i++ ){                
                var oLi = '<li><img src="'+URL.createObjectURL(files[i])+'"><span class="close" onclick="closeli(this)" >×</span></li>';
                 }
                $(".list").append(oLi);
            }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文