首页js拖拽上传文件生成代码

js拖拽上传文件生成代码

时间: 2023-08-06 16:07:45 浏览: 96

下面是一个简单的示例代码，实现了拖拽上传文件并生成对应的上传代码： ```html <!DOCTYPE html> <html> <head> <title>拖拽上传文件生成代码</title> <script> function handleDrop(e) { e.preventDefault(); var files = e.dataTransfer.files; if (files.length > 0) { var file = files[0]; var reader = new FileReader(); reader.onload = function(e) { var content = e.target.result; var code = "const file = new File([\n" + JSON.stringify(content) + "\n], \"" + file.name + "\", {type: \"" + file.type + "\"});\n" + "const formData = new FormData();\n" + "formData.append(\"file\", file);\n" + "fetch(\"/upload\", {\n" + " method: \"POST\",\n" + " body: formData\n" + "});\n"; document.getElementById("code").value = code; } reader.readAsText(file); } } function handleDragOver(e) { e.preventDefault(); } </script> </head> <body> <div style="border: 1px dashed black; padding: 20px;" ondrop="handleDrop(event)" ondragover="handleDragOver(event)"> 拖拽文件到这里上传：<br> <input type="text" id="code" size="50"> </div> </body> </html> ``` 这个示例代码中，我们使用了HTML5的拖拽API来实现拖拽上传文件的功能。当用户拖拽文件到指定区域时，我们会读取文件内容，并生成对应的上传代码，并将代码显示在页面上的input文本框中。在这个示例中，我们生成了一个包含上传文件的FormData对象，并使用fetch方法将其上传到服务器的/upload接口。

阅读全文