async function saveFile(inp) 
{
    let formData = new FormData();           
    formData.append("file", inp.files[0]);
    await fetch('/upload/somedata', {method: "POST", body: formData});    
    alert('success');
}

<input type="file" onchange="saveFile(this)" >

8, Autoriteit 3%

$("#submit_car").click(function() {
  var formData = new FormData($('#car_cost_form')[0]);
  $.ajax({
     url: 'car_costs.php',
     data: formData,
     contentType: false,
     processData: false,
     cache: false,
     type: 'POST',
     success: function(data) {
       // ...
     },
  });
});

EDIT: OPMERKING INCONTAINYPE EN Procesgegevens
U kunt dit eenvoudig gebruiken om bestanden te uploaden via Ajax …… Invoer inzenden kan niet buiten formulierelement zijn:)

9, Autoriteit 3%

Als u het zo wilt doen:

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function() {
    console.log( 'Finished upload');                    
});

dan

https://github.com/lgersman/jquery.orangevolt -ampere/blob/master/src/jquery.upload.js

misschien jouw oplossing.

Antwoord 10, autoriteit 3%

update 2019:

html

<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>

js

$(document).on('submit', '.fr', function(){
    $.ajax({ 
        type: 'post', 
        url: url, <--- you insert proper URL path to call your views.py function here.
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        data: new FormData(this) ,
        success: function(data) {
             console.log(data);
        }
        });
        return false;
    });

views.py

form = ThisForm(request.POST, request.FILES)
if form.is_valid():
    text = form.cleaned_data.get("text")
    example_image = request.FILES['example_image']

Antwoord 11, autoriteit 3%

Gebruik FormData. Het werkt echt goed 🙂 …

var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit
$.ajax({
    url: '/your-form-processing-page-url-here',
    type: 'POST',
    data: jform,
    dataType: 'json',
    mimeType: 'multipart/form-data', // this too
    contentType: false,
    cache: false,
    processData: false,
    success: function(data, status, jqXHR){
        alert('Hooray! All is well.');
        console.log(data);
        console.log(status);
        console.log(jqXHR);
    },
    error: function(jqXHR,status,error){
        // Hopefully we should never reach here
        console.log(jqXHR);
        console.log(status);
        console.log(error);
    }
});

12, Autoriteit 3%

• Gebruik een verborgen iframe en stel het doel van uw formulier in op de naam van That Iframe. Op deze manier, wanneer het formulier wordt ingediend, wordt alleen de iframe opgefrist.
• Heeft een evenementhandler geregistreerd voor de belastingevenement van de IFrame om het antwoord te ontleden.

13, Autoriteit 2%

Ik heb deze in een eenvoudige code behandeld. U kunt een werkende demo downloaden van hier

Voor uw zaak, deze zijn zeer mogelijk. Ik zal je stap voor stap zetten hoe je een bestand naar de server kunt uploaden met behulp van Ajax JQuery.

Laten we eerst een HTML-bestand maken om het volgende formulierbestandelement toe te voegen zoals hieronder wordt weergegeven.

<form action="" id="formContent" method="post" enctype="multipart/form-data" >
         <input  type="file" name="file"  required id="upload">
         <button class="submitI" >Upload Image</button> 
</form>

Maak tweedely een jQuery.js-bestand aan en voeg de volgende code toe om onze bestandsinzending aan de server

te verwerken

   $("#formContent").submit(function(e){
        e.preventDefault();
    var formdata = new FormData(this);
        $.ajax({
            url: "ajax_upload_image.php",
            type: "POST",
            data: formdata,
            mimeTypes:"multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function(){
                alert("file successfully submitted");
            },error: function(){
                alert("okey");
            }
         });
      });
    });

Daar ben je klaar. Bekijk meer

Antwoord 14, autoriteit 2%

Het gebruik van FormData is de juiste keuze, zoals aangegeven door veel antwoorden. hier is een stukje code dat geweldig werkt voor dit doel. Ik ben het ook eens met de opmerking van het nesten van ajax-blokken om complexe omstandigheden te voltooien. Door e.PreventDefault(); in mijn ervaring maakt de code meer compatibel met meerdere browsers.

   $('#UploadB1').click(function(e){        
    e.preventDefault();
    if (!fileupload.valid()) {
        return false;            
    }
    var myformData = new FormData();        
    myformData.append('file', $('#uploadFile')[0].files[0]);
    $("#UpdateMessage5").html("Uploading file ....");
    $("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");
    myformData.append('mode', 'fileUpload');
    myformData.append('myid', $('#myid').val());
    myformData.append('type', $('#fileType').val());
    //formData.append('myfile', file, file.name); 
    $.ajax({
        url: 'include/fetch.php',
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        data: myformData,
        enctype: 'multipart/form-data',
        success: function(response){
            $("#UpdateMessage5").html(response); //.delay(2000).hide(1); 
            $("#UpdateMessage5").css("background","");
            console.log("file successfully submitted");
        },error: function(){
            console.log("not okay");
        }
    });
});

Antwoord 15

Ik heb een selectie van meerdere bestanden geïmplementeerd met instant preview en upload na het verwijderen van ongewenste bestanden uit preview via ajax.

Gedetailleerde documentatie is hier te vinden: http:/ /anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html

Demo: http://jsfiddle.net/anas/6v8Kz/7/embedded /resultaat/

jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/

Javascript:

   $(document).ready(function(){
    $('form').submit(function(ev){
        $('.overlay').show();
        $(window).scrollTop(0);
        return upload_images_selected(ev, ev.target);
    })
})
function add_new_file_uploader(addBtn) {
    var currentRow = $(addBtn).parent().parent();
    var newRow = $(currentRow).clone();
    $(newRow).find('.previewImage, .imagePreviewTable').hide();
    $(newRow).find('.removeButton').show();
    $(newRow).find('table.imagePreviewTable').find('tr').remove();
    $(newRow).find('input.multipleImageFileInput').val('');
    $(addBtn).parent().parent().parent().append(newRow);
}
function remove_file_uploader(removeBtn) {
    $(removeBtn).parent().parent().remove();
}
function show_image_preview(file_selector) {
    //files selected using current file selector
    var files = file_selector.files;
    //Container of image previews
    var imageContainer = $(file_selector).next('table.imagePreviewTable');
    //Number of images selected
    var number_of_images = files.length;
    //Build image preview row
    var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' +
        '<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' +
        '</tr> ');
    //Add image preview row
    $(imageContainer).html(imagePreviewRow);
    if (number_of_images > 1) {
        for (var i =1; i<number_of_images; i++) {
            /**
             *Generate class name of the respective image container appending index of selected images, 
             *sothat we can match images selected and the one which is previewed
             */
            var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i);
            $(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i);
            $(imageContainer).append(newImagePreviewRow);
        }
    }
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        /**
         * Allow only images
         */
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
          continue;
        }
        /**
         * Create an image dom object dynamically
         */
        var img = document.createElement("img");
        /**
         * Get preview area of the image
         */
        var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');
        /**
         * Append preview of selected image to the corresponding container
         */
        preview.append(img); 
        /**
         * Set style of appended preview(Can be done via css also)
         */
        preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'});
        /**
         * Initialize file reader
         */
        var reader = new FileReader();
        /**
         * Onload event of file reader assign target image to the preview
         */
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
        /**
         * Initiate read
         */
        reader.readAsDataURL(file);
    }
    /**
     * Show preview
     */
    $(imageContainer).show();
}
function remove_selected_image(close_button)
{
    /**
     * Remove this image from preview
     */
    var imageIndex = $(close_button).attr('imageindex');
    $(close_button).parents('.imagePreviewRow_' + imageIndex).remove();
}
function upload_images_selected(event, formObj)
{
    event.preventDefault();
    //Get number of images
    var imageCount = $('.previewImage').length;
    //Get all multi select inputs
    var fileInputs = document.querySelectorAll('.multipleImageFileInput');
    //Url where the image is to be uploaded
    var url= "/upload-directory/";
    //Get number of inputs
    var number_of_inputs = $(fileInputs).length; 
    var inputCount = 0;
    //Iterate through each file selector input
    $(fileInputs).each(function(index, input){
        fileList = input.files;
        // Create a new FormData object.
        var formData = new FormData();
        //Extra parameters can be added to the form data object
        formData.append('bulk_upload', '1');
        formData.append('username', $('input[name="username"]').val());
        //Iterate throug each images selected by each file selector and find if the image is present in the preview
        for (var i = 0; i < fileList.length; i++) {
            if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) {
                var file = fileList[i];
                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }
                // Add the file to the request.
                formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name);
            }
        }
        // Set up the request.
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                var jsonResponse = JSON.parse(xhr.responseText);
                if (jsonResponse.status == 1) {
                    $(jsonResponse.file_info).each(function(){
                        //Iterate through response and find data corresponding to each file uploaded
                        var uploaded_file_name = this.original;
                        var saved_file_name = this.target;
                        var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />';
                        file_info_container.append(file_name_input);
                        imageCount--;
                    })
                    //Decrement count of inputs to find all images selected by all multi select are uploaded
                    number_of_inputs--;
                    if(number_of_inputs == 0) {
                        //All images selected by each file selector is uploaded
                        //Do necessary acteion post upload
                        $('.overlay').hide();
                    }
                } else {
                    if (typeof jsonResponse.error_field_name != 'undefined') {
                        //Do appropriate error action
                    } else {
                        alert(jsonResponse.message);
                    }
                    $('.overlay').hide();
                    event.preventDefault();
                    return false;
                }
            } else {
                /*alert('Something went wrong!');*/
                $('.overlay').hide();
                event.preventDefault();
            }
        };
        xhr.send(formData);
    })
    return false;
}

Antwoord 16

Ja dat kan, gebruik gewoon javascript om het bestand op te halen en zorg ervoor dat u het bestand leest als een gegevens-URL. Ontleden de dingen vóór base64 om de base 64-gecodeerde gegevens daadwerkelijk te krijgen en als u php of echt een andere back-endtaal gebruikt, kunt u de base 64-gegevens decoderen en opslaan in een bestand zoals hieronder weergegeven

Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
  dataToBeSent = reader.result.split("base64,")[1];
  $.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);
PHP:
    file_put_contents('my.pdf', base64_decode($_POST["data"]));

Natuurlijk wil je waarschijnlijk wat validatie doen, zoals controleren met welk bestandstype je te maken hebt en dat soort dingen, maar dit is het idee.

Antwoord 17

Om al je formulierinvoer te krijgen, inclusief het type=”file”, moet je FormData-objectgebruiken.
u kunt de formData-inhoud zien in de debugger -> netwerk ->Headersnadat u het formulier hebt verzonden.

var url = "YOUR_URL";
var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);
$.ajax(url, {
    method: 'post',
    processData: false,
    contentType: false,
    data: formData
}).done(function(data){
    if (data.success){ 
        alert("Files uploaded");
    } else {
        alert("Error while uploading the files");
    }
}).fail(function(data){
    console.log(data);
    alert("Error while uploading the files");
});

18

<html>
    <head>
        <title>Ajax file upload</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function (e) {
            $("#uploadimage").on('submit', (function(e) {
            e.preventDefault();
                    $.ajax({
                    url: "upload.php", // Url to which the request is send
                            type: "POST", // Type of request to be send, called as method
                            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            contentType: false, // The content type used when sending data to the server.
                            cache: false, // To unable request pages to be cached
                            processData:false, // To send DOMDocument or non processed data file it is set to false
                            success: function(data)   // A function to be called if request succeeds
                            {
                            alert(data);
                            }
                    });
            }));
        </script>
    </head>
    <body>
        <div class="main">
            <h1>Ajax Image Upload</h1><br/>
            <hr>
            <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
                <div id="image_preview"><img id="previewing" src="noimage.png" /></div>
                <hr id="line">
                <div id="selectImage">
                    <label>Select Your Image</label><br/>
                    <input type="file" name="file" id="file" required />
                    <input type="submit" value="Upload" class="submit" />
                </div>
            </form>
        </div>
    </body>
</html>

Antwoord 19

om een bestand te uploaden dat door de gebruiker is ingediend als onderdeel van het formulier met behulp van jQuery, volgt u de onderstaande code:

var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);

Stuur vervolgens het formuliergegevensobject naar de server.

We kunnen een bestand of blob ook rechtstreeks aan het FormData-object toevoegen.

data.append("myfile", myBlob, "filename.txt");

Antwoord 20

Je kunt de methode ajaxSubmit als volgt gebruiken 🙂
wanneer u een bestand selecteert dat naar de server moet worden geüpload, dient u het formulier in te dienen bij de server 🙂

$(document).ready(function () {
    var options = {
    target: '#output',   // target element(s) to be updated with server response
    timeout: 30000,
    error: function (jqXHR, textStatus) {
            $('#output').html('have any error');
            return false;
        }
    },
    success: afterSuccess,  // post-submit callback
    resetForm: true
            // reset the form after successful submit
};
$('#idOfInputFile').on('change', function () {
    $('#idOfForm').ajaxSubmit(options);
    // always return false to prevent standard browser submit and page navigation
    return false;
});
});

Antwoord 21

Als je een bestand wilt uploaden met AJAX, hier is de code die je kunt gebruiken voor het uploaden van bestanden.

$(document).ready(function() {
    var options = { 
                beforeSubmit:  showRequest,
        success:       showResponse,
        dataType: 'json' 
        }; 
    $('body').delegate('#image','change', function(){
        $('#upload').ajaxForm(options).submit();        
    }); 
});     
function showRequest(formData, jqForm, options) { 
    $("#validation-errors").hide().empty();
    $("#output").css('display','none');
    return true; 
} 
function showResponse(response, statusText, xhr, $form)  { 
    if(response.success == false)
    {
        var arr = response.errors;
        $.each(arr, function(index, value)
        {
            if (value.length != 0)
            {
                $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
            }
        });
        $("#validation-errors").show();
    } else {
         $("#output").html("<img src='"+response.file+"' />");
         $("#output").css('display','block');
    }
}

Hier is de HTML voor het uploaden van het bestand

<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off">
    <input type="file" name="image" id="image" /> 
</form>

Antwoord 22

var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
    url: 'url',
    type: 'POST',
    data: dataform,
    async: false,
    success: function(res) {
        response data;
    },
    cache: false,
    contentType: false,
    processData: false
});

Antwoord 23

Hier was een idee waar ik aan dacht:

Have an iframe on page and have a referencer.

Heb een vorm waarin u het invoertype bestandselement naar verplaatst.

Form:  A processing page AND a target of the FRAME.

Het resultaat wordt naar het iframe gepost en dan kun je de opgehaalde gegevens een niveau hoger sturen naar de gewenste afbeeldingstag met zoiets als:

data:image/png;base64,asdfasdfasdfasdfa

en de pagina wordt geladen.

Ik geloof dat het voor mij werkt, en afhankelijk van hoe je iets kunt doen als:

.aftersubmit(function(){
    stopPropagation(); // or some other code which would prevent a refresh.
});

Antwoord 24

$("#form-id").submit(function (e) {
   e.preventDefault();
});
$("#form-id").submit(function (e) {
     var formObj = $(this);
     var formURL = formObj.attr("action");
     var formData = new FormData(this);
          $.ajax({
             url: formURL,
             type: 'POST',
             data: formData,
             processData: false,
             contentType: false,
             async: true,
             cache: false,
             enctype: "multipart/form-data",
             dataType: "json",
             success: function (data) {
                 if (data.success) {
                        alert(data.success)
                 } 
                 if  (data.error) {
                        alert(data.error)
                 } 
             }
         });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form class="form-horizontal" id="form-id" action="masterFileController" enctype="multipart/form-data">
    <button class="btn-success btn" type="submit" id="btn-save" >Submit</button>
</form>

<input class="form-control cu-b-border" type="file" id="formFile">
<img id="myImg" src="#">

<script>
    var formData = new FormData();
    formData.append('file', $('#formFile')[0].files[0]);
    $.ajax({
        type: "POST",
        url: '/GetData/UploadImage',
        data: formData,
        processData: false, // tell jQuery not to process the data
        contentType: false, // tell jQuery not to set contentType
        success: function (data) {
            console.log(data);
            $('#myImg').attr('src', data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
        }
    })
</script>

public ActionResult UploadImage(HttpPostedFileBase file)
        {
            string filePath = "";
            if (file != null)
            {
                string path = "/uploads/Temp/";
                if (!Directory.Exists(Server.MapPath("~" + path)))
                {
                    Directory.CreateDirectory(Server.MapPath("~" + path));
                }
                filePath = FileUpload.SaveUploadedFile(file, path);
            }
            return Json(filePath, JsonRequestBehavior.AllowGet);
        }