在IE中选择附件上传后,再去编辑保存这个附件 会同时生成tmp临时文件 不是隐藏属性的tmp文件

Question

同样的问题在chrome和Firefox中不存在,试了很多方法都没办法解决
重要的是生成的文件不是隐藏文件 很扎眼
求助 不知道如何解决

Answer 1

您好题主！
本答案参考GPT-4o，由爪磕整理并总结，希望对您有所帮助！

---

在IE中处理附件上传和编辑的问题可能会引发一些特定的浏览器行为，特别是在生成临时文件方面。这个问题在现代浏览器如Chrome和Firefox中不存在，因为它们的文件处理和安全机制有所不同。以下是一些可能的解决方案和建议，帮助你解决IE中生成非隐藏临时文件的问题。

1. 使用FormData处理文件上传

确保你使用的是HTML5的FormData对象来处理文件上传。这种方法在所有现代浏览器中都能很好地工作，并且应该避免生成临时文件。

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="fileInput" name="file">
    <button type="button" onclick="uploadFile()">Upload</button>
</form>

<script>
function uploadFile() {
    var form = document.getElementById('uploadForm');
    var formData = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    xhr.onload = function () {
        if (xhr.status === 200) {
            alert('File uploaded successfully');
        } else {
            alert('An error occurred!');
        }
    };

    xhr.send(formData);
}
</script>

2. 使用兼容的文件上传库

使用已经处理好兼容性的文件上传库，如jQuery File Upload。这些库通常会处理好跨浏览器的兼容性问题，包括IE。

<!-- Include jQuery and the jQuery File Upload plugin -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.31.0/js/jquery.fileupload.min.js"></script>

<form id="fileupload" action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
    <button type="submit">Upload</button>
</form>

<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>

3. 清理临时文件

在服务器端处理上传文件的时候，确保在处理完成后清理临时文件。以下是一个使用Node.js的示例：

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    const tempPath = req.file.path;
    const targetPath = path.join(__dirname, 'uploads', req.file.originalname);

    fs.rename(tempPath, targetPath, err => {
        if (err) {
            return res.status(500).send('Error saving file');
        }

        // Optionally, delete the temporary file
        fs.unlink(tempPath, err => {
            if (err) {
                console.error('Error deleting temp file:', err);
            }
        });

        res.status(200).send('File uploaded successfully');
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

4. 检查服务器配置

检查你的服务器配置，确保它不会在处理文件上传时生成多余的临时文件。如果使用的是某些特定的服务器软件或库，查看文档中是否有关于临时文件处理的配置选项。

5. 使用Polyfill和Shims

使用针对IE的Polyfill和Shims，可以解决一些兼容性问题。例如，使用html5shiv来确保IE能够正确处理HTML5元素。

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

结论

通过以上方法，你应该能够解决在IE中上传文件时生成非隐藏临时文件的问题。最关键的是确保使用现代的HTML5 API和兼容库来处理文件上传，同时在服务器端做好临时文件的清理工作。如果问题仍然存在，建议检查特定的浏览器设置和服务器配置，看看是否有其他因素影响文件处理流程。