Dropzone.js 无法在 IOS 上上传文件

如何解决Dropzone.js 无法在 IOS 上上传文件

我正在使用 dropzone 将文件上传到服务器。当用户将文件添加到放置区时，他们可以选择更改文件名。例如;该文件将保存为 Dog.png 而不是 D6282238752Q82.png。 这是我的代码：

    <script type="text/javascript">
        Dropzone.autoDiscover = false;
        
        var previewNode = document.querySelector("#template");
        previewNode.id = "";
        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        var myDropzone = new Dropzone('div#mydropzone',{ // Make the whole body a dropzone
            url: "/Upload.aspx?no=<%= Request.QueryString["no"] %>",// Set the url
            parallelUploads: 10,thumbnailWidth: 150,thumbnailHeight: 80,uploadMultiple: true,previewTemplate: previewTemplate,autoProcessQueue: false,acceptedFiles: "image/*,application/pdf,.doc,.docx,.xls,.xlsx,.csv,.tsv,.ppt,.pptx,.pages,.odt,.rtf",previewsContainer: "#previews",// Define the container to display the previews
            clickable: [".fileinput-button",".upload-drop-zone"],// Define the element that should be used as click trigger to select files.
            init: function() {
                var submitButton = document.querySelector("#submit-all")
                    myDropzone = this;
             },});

        myDropzone.on("addedfile",function (file) {
            // Hookup the start button
            var filename = file.name;
            var extension = filename.split('.').pop();
            file.previewElement.querySelector("#txtNewFileName").value = filename.substr(0,filename.lastIndexOf('.'));
            file.previewElement.querySelector("#txtFileExtension").innerHTML = filename.split('.').pop().toUpperCase();

            var submitButton = document.querySelector("#submit-all")
            submitButton.classList.remove("invisible");
            submitButton.classList.add("visible");
        });

        // Update the total progress bar
        myDropzone.on("totaluploadprogress",function (progress) {
            document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
            
        });

        myDropzone.on("sending",function (file,xhr,formData) {
            // Show the total progress bar when upload starts
            document.querySelector("#total-progress").style.opacity = "1";

            var filename = file.name;
            var extension = filename.split('.').pop();
           
            var newFilename = file.previewElement.querySelector("#txtNewFileName").value + '.' + extension;
            formData.append("newFileName",newFilename);
        });
    
        myDropzone.on("processing",function () {
            myDropzone.options.autoProcessQueue = true;
        });

        // Hide the total progress bar when nothing's uploading anymore
        myDropzone.on("queuecomplete",function (sending,progress) {
            document.querySelector("#total-progress").style.opacity = "0";
        });

        myDropzone.on("success",function (progress,file) {
            var submitButton = document.querySelector("#submit-all")
            submitButton.classList.remove("visible");
            submitButton.classList.add("invisible");

            var refreshButton = document.getElementById("<%= btnRefresh.ClientID %>");
            refreshButton.click();
        });            

        myDropzone.on("removedfile",function (file) {

            //post request to remove file from server
            $.post("/Upload.aspx?no=<%= Request.QueryString["no"] %>&delete=" + file.newName);

            var refreshButton = document.getElementById("<%= btnRefresh.UserID %>");
            refreshButton.click();
        });

        myDropzone.on('dragover',function (e) {
            this.className = 'upload-drop-zone drop';
            return false;
        })
        $(document).on('click','#submit-all',function (file) {
            myDropzone.processQueue();
        });
    </script>

它在 Chrome、Edge 和 android 上运行良好，但不适用于 Iphone 或 Ipad。我试图在网上找到答案，但无济于事。

解决方法

我找到了一个对我有帮助的答案，以防有人遇到同样的问题。 我在 dropzone 中找不到解决它的方法，所以选择了 C#。我使用了 $POST 方法来更改文件名。

$(document).on('click','#submit-all',function (file) {
        myDropzone.processQueue();
        
        var newFilenames = [...document.querySelectorAll("#txtNewFileName")].map(sel => sel.value).join(',');

        $.post("/Upload.aspx?no=<%= Request.QueryString["no"] %>&rename=" + newFilenames);//changeFileNames);

    }); 

在 Upload.aspx.cs 中，我有以下代码：

if (!String.IsNullOrEmpty(Request.QueryString["rename"]))
        {
            string renameF = Request.QueryString["rename"];
            string[] renames = renameF.Split(',');

            var di = new DirectoryInfo(fileArchivePath);
            var filess = di.GetFiles().OrderByDescending(d => d.LastWriteTime).ToArray();

            int count = 0;
            foreach (string name in renames)
            {
                string inn = filess[count].FullName;
                string ext = filess[count].Extension;
                string ny = name + ext;

                string inDir = Path.Combine(fileArchivePath,inn);
                string nynavn = Path.Combine(fileArchivePath,ny);

                if (File.Exists(inDir))
                {
                    File.Copy(inDir,nynavn,true);
                    File.Delete(inDir);
                }

                count++;
            }

            return;
        }

我已经有了上传文件的代码，但是附加的 Post 方法会更改现有的文件名。