javascript - File upload using base64 encoded text instead of multipartform-data - good idea? - Stack Overflow

admin管理员组

文章数量:1425743

I currently have a django formset with dynamic number of forms. 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. But how can I pass these files to django formset instead of form-0-file, form-1-file etc?

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.

I currently have a django formset with dynamic number of forms. 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. But how can I pass these files to django formset instead of form-0-file, form-1-file etc?

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.

• javascript
• html
• django

Share Improve this question Follow asked May 28, 2013 at 13:37 tuxcanflytuxcanfly 2,57411 gold badge2020 silver badges1818 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Just use multiple attribute and use FILES to get all of uploaded files.

base64 encoding maybe not help

Using multiple='multiple' is not related to formset or single form. It will work natively with 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.

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.

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.

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.

This is my solution (Please note this only catered for one file at a time - but it might be a starting point.)

JavaScript:

First declare an object for the FormData - This will be used to send any additional info along with the files:

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:

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

$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.

Hope you can apply this to your problem.

本文标签： javascriptFile upload using base64 encoded text instead of multipartformdatagood ideaStack Overflow