简体   繁体   English

使用base64编码文本而不是multipart / form-data上传文件 - 好主意?

[英]File upload using base64 encoded text instead of multipart/form-data - good idea?

I currently have a django formset with dynamic number of forms. 我目前有一个动态数量的表格的django formset。 Each form has a file field. 每个表单都有一个文件字段。

While this works, I need a way to allow multiple files to be selected at once. 虽然这有效,但我需要一种方法来允许一次选择多个文件。 I can do that with input type='file' multiple='multiple' and I can read file data using FileReader . 我可以使用input type='file' multiple='multiple'来做到这一点,我可以使用FileReader读取文件数据。 But how can I pass these files to django formset instead of form-0-file , form-1-file etc? 但是如何将这些文件传递给django formset而不是form-0-fileform-1-file等?

I can think of one way - replace FileField with TextField , and pass around the base64 encoded file as text, but I'm not sure if it's a good solution. 我可以想到一种方法 - 用TextField替换FileField ,并将base64编码的文件作为文本传递,但我不确定它是否是一个很好的解决方案。

Just use multiple attribute and use FILES to get all of uploaded files. 只需使用多个属性并使用FILES获取所有上传的文件。

base64 encoding maybe not help base64编码可能无济于事

Using multiple='multiple' is not related to formset or single form. 使用multiple='multiple'与formset或single form无关。 It will work natively with django. 它将与django本地工作。 So that if you plan to have single form instead of formset, just put multiple attribute and then access request.FILES to get all of uploaded files. 因此,如果您计划使用单个表单而不是formset,只需输入multiple属性,然后访问request.FILES即可获取所有上传的文件。

You should store the Images as Files, (Here are some good answers to do that) , 你应该将图像存储为文件, (这里有一些很好的答案)

I already tried to store images of that way but it have a lot of problems: 我已经尝试存储这种方式的图像,但它有很多问题:

  1. Every time you go to that page, it will start loading the image again, and the people don't want to load the same image every time. 每次进入该页面时,它都会再次开始加载图像,并且人们不希望每次都加载相同的图像。

  2. It will use a lot of bandwidth. 它会占用大量带宽。

  3. If you are using a free web hosting service, will spend all you your bandwidth in a couple of hours, or when you store 50 images, so that mean that your site will be out the whole month, even the services that provide unlimited hosting and bandwidth, inforce a monthly bandwidth. 如果您使用免费的网络托管服务,将在几个小时内或在您存储50张图片时花费所有带宽,这意味着您的网站将在整个月内出现,即​​使是提供无限托管服务的服务带宽,强制每月带宽。

I recently had a problem where I had to implement a solution where a user can upload a document, stream that to the server, and without storing in on the server, post the stream to a SOAP server. 我最近遇到了一个问题,我必须实现一个解决方案,用户可以上传文档,将文件流传输到服务器,而不存储在服务器上,将流发布到SOAP服务器。

The way I implemented it, is as follows: 我实现它的方式如下:

I wanted to upload the file via AJAX in order for me to show the progress of the upload. 我想通过AJAX上传文件,以便我显示上传的进度。

This is my solution (Please note this only catered for one file at a time - but it might be a starting point.) 这是我的解决方案(请注意,这一次只能满足一个文件 - 但它可能是一个起点。)

JavaScript: JavaScript的:

First declare an object for the FormData - This will be used to send any additional info along with the files: 首先声明FormData的对象 - 这将用于发送任何其他信息以及文件:

var formData = new FormData();

Secondly append all the data you would like to send to the server: 然后将您要发送到服务器的所有数据附加到:

formData.append("documentDescription", $("#documentDescription textarea").val());
formData.append("afile", file.files[0]);

Now create a new instance of XMLHttpRequest: 现在创建一个XMLHttpRequest的新实例:

var xhr = new XMLHttpRequest();

This is the rest of the code that got everything working: 这是使一切正常工作的其余代码:

xhr.open("POST", "UploadDocumentURL", true);
xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                            var percentComplete = (e.loaded / e.total) * 100;
                            $('.progress .bar').css('width', percentComplete + '%').attr('aria-valuenow', percentComplete);
                        }
                    }

xhr.onload = function() {
                        if (this.status == 200) {
                            var resp = JSON.parse(this.response);
                            if (resp.type === "error") {
                                notify.add(resp.type, "Error", resp.message, 3000, true);
                            } else {
                                notify.add(resp.type, "Success", resp.message, 3000);
                            }
                        }
                        ;
                    };

xhr.send(formData);

PHP PHP

$documentName = $_POST["documentDescription"];
$fileName = $_FILES['afile']['name'];
$fileType = $_FILES['afile']['type'];
$ext = pathinfo($fileName, PATHINFO_EXTENSION);
$fileName = pathinfo($fileName, PATHINFO_FILENAME);
$fileContent = file_get_contents($_FILES['afile']['tmp_name']);

You will now have the Binary data on the server. 您现在将在服务器上拥有二进制数据。

You should be able to make this work for multiple files by looping through the file.files[0] in JavaScript. 您应该能够通过循环遍历JavaScript中的file.files[0]来使这个工作适用于多个文件。

Hope you can apply this to your problem. 希望你能将这个应用到你的问题中。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 要上传文件,在 post body 与 multipart/form-data 中发送 base64 的优缺点是什么 - To upload a file what are the pros and cons of sending base64 in post body vs multipart/form-data 转换 base64 图像以作为 multipart/form-data 发送 - Convert base64 image to send as multipart/form-data 在表单中使用base64作为文件上传 - Using base64 in form to upload as file 将base64图像转换为多部分/表单数据并使用jQuery发送 - Converting base64 image to multipart/form-data and sending with jQuery 如何使用Angularjs上传文件,multipart / form-data - how to upload file using Angularjs, multipart/form-data 如何将文件编码为base64,然后使用JS将其作为multipart文件上传到后端api? - How do you encode a file to base64 then upload as multipart file to backend api using JS? 使用 FormData 上传 base64 编码图像? - Upload a base64 encoded image using FormData? 如何仅使用 JavaScript 将 base64 编码的图像数据上传到 S3? - How to upload base64 encoded image data to S3 using JavaScript only? 强大:解析多部分/表单数据请求,然后上传文件 - Formidable: Parse multipart/form-data request THEN upload file Request.js模拟文件上传(多部分/表单数据) - Request.js Simulate a File Upload (multipart/form-data)
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM