javascript - multiple - jquery upload file ajax



Wie kann ich Dateien asynchron hochladen? (20)

Ich möchte eine Datei asynchron mit jQuery hochladen. Das ist mein HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Und hier mein Jquery Code:

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

Anstelle der hochgeladenen Datei bekomme ich nur den Dateinamen. Was kann ich tun, um dieses Problem zu beheben?

Aktuelle Lösung

Ich benutze das jQuery Form Plugin zum Hochladen von Dateien.

https://code.i-harness.com


2017 Update: Es hängt immer noch von den Browsern ab, die Ihre demografische Nutzung verwendet.

Bei der "neuen" HTML5- file API ist es wichtig zu wissen, dass sie bis zum IE 10 nicht unterstützt wird . Wenn der spezifische Markt, auf den Sie abzielen, eine überdurchschnittliche Präferenz gegenüber älteren Windows-Versionen hat, haben Sie möglicherweise keinen Zugriff darauf.

Für 2017 sind etwa 5% der Browser einer von IE 6, 7, 8 oder 9. Wenn Sie in ein großes Unternehmen gehen (z. B. ein B2B-Tool oder etwas, das Sie für das Training zur Verfügung stellen), kann diese Zahl in die Höhe schnellen. Vor wenigen Monaten - 2016 - habe ich mich mit einem Unternehmen beschäftigt, das IE8 auf über 60% seiner Maschinen verwendet.

Bevor Sie also etwas tun, prüfen Sie, welchen Browser Ihre Benutzer verwenden . Wenn Sie dies nicht tun, werden Sie eine schnelle und schmerzliche Lektion lernen, warum "Arbeit für mich" nicht gut genug ist, wenn Sie einen Kunden liefern.

Meine Antwort von 2008 folgt.

Es gibt jedoch praktikable Nicht-JS-Methoden zum Hochladen von Dateien. Sie können auf der Seite einen Iframe erstellen (den Sie mit CSS ausblenden), und dann Ihr Formular darauf ausrichten, in diesem Iframe zu posten. Die Hauptseite muss sich nicht bewegen.

Es ist ein "echter" Post, also ist es nicht vollständig interaktiv. Wenn Sie Status benötigen, benötigen Sie etwas serverseitiges, um dies zu verarbeiten. Dies hängt stark von Ihrem Server ab. ASP.NET hat schönere Mechanismen. PHP plain schlägt fehl, aber Sie können Perl oder Apache-Modifikationen verwenden, um dieses Problem zu umgehen.

Wenn Sie mehrere Dateiuploads benötigen, ist es am besten, jede Datei einzeln auszuführen (um die maximalen Dateiuploadlimits zu überwinden). Veröffentlichen Sie das erste Formular im iframe, überwachen Sie den Fortschritt anhand der obigen Angaben. Wenn das Formular fertig ist, buchen Sie das zweite Formular im iframe und so weiter.

Oder verwenden Sie eine Java / Flash-Lösung. Sie sind viel flexibler, was sie mit ihren Beiträgen machen können ...


Die einfachste und robusteste Methode, die ich in der Vergangenheit gemacht habe, besteht darin, einfach ein verstecktes iFrame-Tag mit Ihrem Formular anzuvisieren. Dann wird es innerhalb des iframe gesendet, ohne die Seite neu zu laden.

Das heißt, wenn Sie kein Plugin, JavaScript oder andere Formen von "Magie" außer HTML verwenden möchten. Natürlich kannst du dies mit JavaScript kombinieren oder was hast du ...

<form target="iframe" action="" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

<iframe name="iframe" id="iframe" style="display:none" ></iframe>

Sie können den Inhalt des iframe onLoad auf onLoad oder Erfolgsantworten lesen und diesen dann an den Benutzer ausgeben.

Chrome, iFrames und onLoad

-note- Sie müssen nur weiterlesen, wenn Sie beim Hochladen / Herunterladen eines UI-Blockers interessiert sind

Derzeit löst Chrome das onLoad-Ereignis für den Iframe nicht aus, wenn er zum Übertragen von Dateien verwendet wird. Firefox, IE und Edge lösen das Onload-Ereignis für die Dateiübertragung aus.

Die einzige Lösung, die ich für Chrome als nützlich befand, war die Verwendung eines Cookies.

Um dies grundsätzlich zu tun, wenn der Upload / Download gestartet wird:

  • [Clientseite] Starten Sie ein Intervall, um nach dem Vorhandensein eines Cookies zu suchen
  • [Serverseite] Machen Sie mit den Dateidaten, was Sie benötigen
  • [Serverseite] Cookie für das clientseitige Intervall einstellen
  • [Clientseitig] Interval sieht das Cookie und verwendet es wie das Ereignis onLoad. Sie können beispielsweise einen UI-Blocker starten und dann bei Laden (oder wenn ein Cookie erstellt wird) den UI-Blocker entfernen.

Ein Cookie dafür zu verwenden ist hässlich, aber es funktioniert.

Ich habe ein jQuery-Plugin erstellt, um dieses Problem beim Herunterladen von Chrome zu beheben. Sie finden es hier

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

Dasselbe Grundprinzip gilt auch für das Hochladen.

So verwenden Sie den Downloader (natürlich auch die JS)

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //block the UI
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

Erstellen Sie auf der Serverseite kurz vor dem Übertragen der Dateidaten das Cookie

 setcookie('iDownloader', true, time() + 30, "/");

Das Plugin onComplete das Cookie und löst dann den onComplete Callback aus.


Eine Lösung, die ich gefunden habe, bestand darin, das <form> -Ziel auf einen versteckten iFrame auszurichten. Der iFrame kann dann JS ausführen, um dem Benutzer anzuzeigen, dass er vollständig ist (beim Laden der Seite).




Ich empfehle zu diesem Zweck das Fine Uploader- Plugin. Ihr JavaScript Code wäre:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

Mit HTML5 Sie Dateien mit Ajax und jQuery hochladen. Darüber hinaus können Sie Dateivalidierungen (Name, Größe und MIME-Typ) durchführen oder das Fortschrittsereignis mit dem HTML5-Progress-Tag (oder einem Div) behandeln. Vor kurzem musste ich einen Dateiuploader erstellen, wollte aber weder Flash noch Iframes oder Plugins verwenden, und nach einigen Nachforschungen habe ich die Lösung gefunden.

Das HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

Erstens können Sie einige Überprüfungen durchführen, wenn Sie möchten. Beispielsweise im onChange-Ereignis der Datei:

$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('max upload size is 1k')
    }

    // Also see .name, .type
});

Nun den Ajax mit dem Klick der Schaltfläche absenden:

$(':button').on('click', function() {
    $.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        }
    });
});

Wie Sie sehen, ist das Hochladen von Dateien mit HTML5 (und einigen Recherchen) nicht nur möglich, sondern auch sehr einfach. Versuchen Sie es mit Google Chrome, da einige der HTML5-Komponenten der Beispiele nicht in jedem Browser verfügbar sind.


Schluss für zukünftige Leser.

Asynchroner Datei-Upload

Mit HTML5

Sie können Dateien mit jQuery mithilfe der $.ajax() Methode FormData wenn FormData und die Datei-API unterstützt werden (beide HTML5-Funktionen).

Sie können Dateien auch ohne FormData senden. In beiden Fällen muss die Datei-API jedoch vorhanden sein, um Dateien so zu verarbeiten, dass sie mit XMLHttpRequest (Ajax) gesendet werden können.

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Ein schnelles, reines JavaScript-Beispiel ( ohne jQuery ) finden Sie unter " Dateien mit einem FormData-Objekt senden ".

Zurückfallen

Wenn HTML5 nicht unterstützt wird (keine Datei-API ), ist die einzige andere reine JavaScript-Lösung (kein Flash oder ein anderes Browser-Plugin) die verborgene iframe- Technik, mit der eine asynchrone Anforderung ohne Verwendung des XMLHttpRequest- Objekts emuliert werden kann.

Es besteht aus dem Setzen eines iframe als Ziel des Formulars mit den Dateieingaben. Wenn der Benutzer eine Anforderung sendet und die Dateien hochgeladen werden, wird die Antwort jedoch im iframe angezeigt, anstatt die Hauptseite erneut zu rendern. Das Ausblenden des iframe macht den gesamten Prozess für den Benutzer transparent und emuliert eine asynchrone Anforderung.

Wenn es richtig gemacht wird, sollte es in jedem Browser virtuell funktionieren, es gibt jedoch einige Einschränkungen, wie man die Antwort vom iframe erhält.

In diesem Fall empfiehlt es sich, ein Wrapper-Plugin wie Bifröst verwenden, das die iframe-Technik verwendet, aber auch einen jQuery-Ajax-Transport bietet, der das Senden von Dateien mit der $.ajax() -Methode wie $.ajax() :

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Plugins

Bifröst ist nur ein kleiner Wrapper, der die ajax-Methode von jQuery um Unterstützung für Fallbacks erweitert. Viele der oben genannten Plugins wie jQuery Form Plugin oder jQuery File Upload enthalten jedoch den gesamten Stack von HTML5 bis hin zu verschiedenen Fallbacks und einigen nützlichen Funktionen, die den Prozess erleichtern. Abhängig von Ihren Anforderungen und Anforderungen möchten Sie möglicherweise eine bloße Implementierung oder eines dieser Plugins in Betracht ziehen.


Sie können es in Vanille-JavaScript ziemlich leicht tun. Hier ist ein Ausschnitt aus meinem aktuellen Projekt:

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);

Simple Ajax Uploader ist eine weitere Option:

https://github.com/LPology/Simple-Ajax-Uploader

  • Browserübergreifend - funktioniert in IE7 +, Firefox, Chrome, Safari, Opera
  • Unterstützt mehrere gleichzeitige Uploads - auch in Nicht-HTML5-Browsern
  • Kein Flash oder externes CSS - nur eine 5-KB-Javascript-Datei
  • Optionale, integrierte Unterstützung für Browser-Statusleisten (mit der APC-Erweiterung von PHP)
  • Flexibel und in hohem Maße anpassbar - Verwenden Sie ein beliebiges Element als Upload-Button und gestalten Sie Ihre eigenen Fortschrittsanzeigen
  • Keine Formulare erforderlich, geben Sie einfach ein Element an, das als Schaltfläche zum Hochladen dienen soll
  • MIT-Lizenz - kostenlos für kommerzielle Projekte

Verwendungsbeispiel:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

Das ist meine Lösung.

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

und die js

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

Regler

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    return Json(":)");
}

Sie können verwenden

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

Demo


Beispiel: Wenn Sie jQuery verwenden, können Sie einfach eine Upload-Datei erstellen. Dies ist ein kleines und starkes jQuery-Plugin, http://jquery.malsup.com/form/ .

Beispiel

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

Ich hoffe es wäre hilfreich


Ein moderner Ansatz ohne Jquery besteht darin, das FileList Objekt zu verwenden, aus dem Sie zurückkehren, <input type="file">wenn der Benutzer eine oder FileList Dateien auswählt, und dann mithilfe von Fetch die um ein FormData Objekt gewickelte FormData .

// The input DOM element
const inputElement = document.querySelector('input');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData()
    data.append('file', inputElement.files[0])
    data.append('imageName', 'flower')

    // Post to server
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    })
});

Konvertieren Sie die Datei in base64 mit readAsDataURL() HTML5 oder einem Base64-Encoder . Geige hier

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

Dann abrufen:

window.open("data:application/octet-stream;base64," + base64);

Mit HTML5 und JavaScript wird das Hochladen async ganz einfach, ich die Hochladen Logik zusammen mit Ihrem HTML erstellen, wird dies nicht vollständig funktioniert , wie es die api braucht, sondern zeigt , wie es funktioniert, wenn Sie den Endpunkt genannt haben /uploadvon der Wurzel Ihrer Website, Dieser Code sollte für Sie funktionieren:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}
<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

Weitere Informationen zu XMLHttpReques:

Das XMLHttpRequest-Objekt

Alle modernen Browser unterstützen das XMLHttpRequest-Objekt. Mit dem Objekt XMLHttpRequest können Sie hinter den Kulissen Daten mit einem Webserver austauschen. Dies bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu laden zu müssen.


Erstellen Sie ein XMLHttpRequest-Objekt

Alle modernen Browser (Chrome, Firefox, IE7 +, Edge, Safari, Opera) verfügen über ein integriertes XMLHttpRequest-Objekt.

Syntax zum Erstellen eines XMLHttpRequest-Objekts:

Variable = new XMLHttpRequest ();


Zugriff auf Domains

Aus Sicherheitsgründen erlauben moderne Browser keinen Zugriff über Domänen hinweg.

Dies bedeutet, dass sowohl die Webseite als auch die zu ladende XML-Datei sich auf demselben Server befinden müssen.

Die Beispiele in W3Schools umfassen alle offenen XML-Dateien in der W3Schools-Domäne.

Wenn Sie das obige Beispiel auf einer Ihrer eigenen Webseiten verwenden möchten, müssen sich die geladenen XML-Dateien auf Ihrem eigenen Server befinden.

Für weitere Details können Sie here weiterlesen ...


Sie können das Hochladen von asynchronen mehreren Dateien mithilfe von JavaScript oder jQuery durchführen, ohne dass dazu ein Plugin verwendet werden muss. Sie können den Fortschritt der Datei in Echtzeit auch in der Fortschrittskontrolle anzeigen. Ich habe 2 nette Links gefunden -

  1. ASP.NET Web Forms-basierte Multi-File-Upload-Funktion mit Fortschrittsbalken
  2. ASP.NET MVC-basierter Upload mehrerer Dateien in jQuery

Die serverseitige Sprache ist C #, aber Sie können einige Modifikationen vornehmen, damit sie mit anderen Sprachen wie PHP funktioniert.

Datei-Upload von ASP.NET Core MVC:

In der Ansicht erstellen Sie das Datei-Upload-Steuerelement in HTML:

[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
    //looping through all the files
    foreach (IFormFile file in mediaUpload)
    {
        //saving the files
        string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

Erstellen Sie nun eine Aktionsmethode in Ihrem Controller:

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}

Die Variable hostingEnvironment ist vom Typ IHostingEnvironment, die mithilfe von Abhängigkeitseinspritzung in den Controller injiziert werden kann, z.

$('#fileupload').fileupload({
    add: function (e, data) {
        var that = this;
        $.getJSON('/example/url', function (result) {
            data.formData = result; // e.g. {id: 123}
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });
    } 
});

Sie können eine Lösung gelöst mit einer Arbeits Demo sehen here , dass Sie Formulardateien an den Server , um eine Vorschau und senden kann. In Ihrem Fall müssen Sie Ajax , um das Hochladen der Datei auf den Server zu erleichtern:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

Die übermittelten Daten sind Formulardaten. Verwenden Sie in Ihrer jQuery eine Formularsendefunktion anstelle einer Schaltfläche. Klicken Sie zum Senden der Formulardatei wie unten gezeigt.

$(document).ready(function () {
   $("#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("successfully submitted");

     });
   });
});

here


Suchen Sie nach Hiermit behandeln Sie den Upload-Prozess für eine Datei asynchron : https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Probe aus dem Link

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>

jQuery Uploadify ist ein weiteres gutes Plugin, mit dem ich Dateien hochgeladen habe. Der JavaScript-Code ist so einfach wie der folgende: Code. Die neue Version funktioniert jedoch nicht in Internet Explorer.

$('#file_upload').uploadify({
    'swf': '/public/js/uploadify.swf',
    'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
    'cancelImg': '/public/images/uploadify-cancel.png',
    'multi': true,
    'onQueueComplete': function (queueData) {
        // ...
    },
    'onUploadStart': function (file) {
        // ...
    }
});

Ich habe viel gesucht und bin zu einer anderen Lösung für das Hochladen von Dateien ohne Plugin und nur mit Ajax gekommen. Die Lösung ist wie folgt:

$(document).ready(function () {
    $('#btn_Upload').live('click', AjaxFileUpload);
});

function AjaxFileUpload() {
    var fileInput = document.getElementById("#Uploader");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'Uploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}




upload