javascript - 使用$.ajax上传多张图片时，怎么分别给每张图片加一个标记发送到后台？

问题描述

问 题

有一个需求是同时上传的多张图片，后台接收后，把名字全部改成上传时间+上传的顺序(ABC....)
例如：
201701090903A.jpg
201701090903B.jpg
201701090903C.jpg
...

因为前台没办法使用上传组件，只能用$.ajax发送post请求了，但是多张图片异步发送，会请求后台多次，这样时间没办法保持一致，而且也没办法区分顺序，从而加后缀字母也没法实现。
尝试了好久没有找到好的解决方案，麻烦有经验的小伙伴帮帮忙解答一下?????

追加：

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">小票上传</h1>
        <p class="page__desc">上传商品图片以及对应的小票信息</p>
    </div>
    <div class="page__bd">
        <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>

        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">小票上传</p>
                            <div class="weui-uploader__info">0/2</div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-btn-area">
            <a href="#" id="upload" class="weui-btn weui-btn_primary">确认上传</a>
        </div>
    </div>
</div>

<script type="text/javascript">
        $(function() {
            var filesObj = [];
            var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
                $gallery = $("#gallery"),
                $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles"),
                $deleteFile = $('.weui-gallery__del'),
                $upload = $("#upload");

            $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];
                        filesObj.push(file);
                        if (url) {
                            src = url.createObjectURL(file);
                        } else {
                            src = e.target.result;
                        }

                        $uploaderFiles.append($(tmpl.replace('#url#', src)));
                        $('.weui-uploader__info').html($uploaderFiles.children('li').length);
                    }
                });
            $uploaderFiles.on("click",
                "li",
                function() {
                    $galleryImg.attr("style", this.getAttribute("style"));
                    $gallery.fadeIn(100);
                });
            $deleteFile.on("click",
                function() {

                });
            $gallery.on("click",
                function() {
                    $gallery.fadeOut(100);
                });
            $upload.on("click",
                function () {
                    $.each(filesObj,
                        function(index, element) {
                            var file = filesObj[index];
                            console.log(file.name);
                            var data = new FormData();
                            data.append('file', file);
                            console.log(data);
                            $.ajax({
                                url: '/User/UpdateImage',
                                type: 'POST',
                                dataType: 'text',
                                data: data,
                                cache: false,
                                processData: false,
                                contentType: false,
                                success:function() {
                                    
                                }
                            });
                            
                        });
                });
        });
    </script>

解决方案

  $upload.on("click",
            function () {
                $.each(filesObj,
                    function(index, element) {
                        var file = filesObj[index];
                        console.log(file.name);
                        var data = new FormData();
                        data.append('file', file);
                        let time = new Date();
                        let year = time.getFullYear();
                        let month = time.getMonth()+1;
                        let day = time.getDate();
                         let date = year+month+day+index;
                         data.append('file',file);
                        data.append('flag', date);
                        console.log(data);
                        $.ajax({
                            url: '/User/UpdateImage',
                            type: 'POST',
                            dataType: 'text',
                            data: data,
                            cache: false,
                            processData: false,
                            contentType: false,
                            success:function() {
                                
                            }
                        });
                        
                    });
            });

这篇关于javascript - 使用$.ajax上传多张图片时，怎么分别给每张图片加一个标记发送到后台？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！