Bild hochladen mit javascript

Ich versuche ein Bild als Object von javascript auf der client-Seite senden es mit jQuery

<html>
<body>
<script language="JavaScript">
function checkSize()
{
    im = new Image();
    im.src = document.Upload.submitfile.value;
if(!im.src)
    im.src = document.getElementById('submitfile').value;
    alert(im.src);
    alert(im.width);
    alert(im.height);
    alert(im.fileSize);

}
</script>
<form name="Upload" action="#" enctype="multipart/form-data" method="post">
   <p>Filename: <input type="file" name="submitfile" id="submitfile" />
   <input type="button" value="Send" onClick="checkSize();" />
</form>
</body>
</html>

Aber in diesem code nur alert(im.src) ist die Anzeige src der Datei aber alert(im.width),alert(im.height),alert(im.filesize) nicht richtig funktionieren und Alarmierung 0, 0, undefined beziehungsweise. Bitte sagen Sie mir, wie kann ich Zugriff auf Bild-Objekt mit javascript?

sollten Sie die upload-Datei-server und abrufen von Daten auf dem server. JS wird nicht in der Lage sein Zugriff auf das lokale Datei-system aufgrund von Sicherheits-Beschränkungen
Dinge, die gut funktioniert bei IE, aber nicht für mozila und Chrom,,,
Sind Sie mit der Arbeit an einigen lokalen server? oder einfach nur testen Sie Ihren code ohne server? nkamm ist richtig..Man kann nicht auf Dateien zugreifen, die lokal wie das in chrome und firfox aus Sicherheitsgründen.

InformationsquelleAutor Adeel Akram | 2012-11-14

  1. 9

    Dem Grund, dass im.fileSize funktioniert nur im IE ist da ".fileSize" ist nur eine IE-Eigenschaft. Da Sie code haben, der funktioniert im IE, die ich tun würde, einen check für den browser und machen Ihren aktuellen code für IE und versuchen Sie so etwas wie dies für andere Browser. 

    var imgFile = document.getElementById('submitfile');
if (imgFile.files && imgFile.files[0]) {
    var width;
    var height;
    var fileSize;
    var reader = new FileReader();
    reader.onload = function(event) {
        var dataUri = event.target.result,
        img = document.createElement("img");
        img.src = dataUri;
        width = img.width;
        height = img.height;
        fileSize = imgFile.files[0].size;
        alert(width);
        alert(height);
        alert(fileSize);
   };
   reader.onerror = function(event) {
       console.error("File could not be read! Code " + event.target.error.code);
   };
   reader.readAsDataURL(imgFile.files[0]);
}

    Habe ich noch nicht getestet mit diesem code, aber es sollte funktionieren, solange ich nicht über einige Tippfehler. Für ein besseres Verständnis von dem, was ich hier mache check out this link.

    InformationsquelleAutor Blake Plumb

  2. 0

    Dies ist, was ich verwenden und es funktioniert Super für mich. Ich speichern Sie das Bild als blob in mysql. Wenn angeklickt, wird die Datei-upload-dialog erscheint, das ist, warum ich die Datei input Sichtbarkeit versteckter und stellen Sie seinen Typ auf Bild hochladen-Dateien. Sobald das Bild ausgewählt ist, ersetzt Sie die vorhandene, dann verwende ich das jquery-post-Methode aktualisieren Sie das Bild in der Datenbank.

    <div>
     <div><img id="logo" class="img-polaroid" alt="Logo" src="' . $row['logo'] . '" title="Click to change the logo" width="128">
     <input style="visibility:hidden;" id="logoupload" type="file" accept="image/* ">
</div>



  $('img#logo').click(function(){                           
    $('#logoupload').trigger('click');
    $('#logoupload').change(function(e){

      var reader = new FileReader(),
           files = e.dataTransfer ? e.dataTransfer.files : e.target.files,
            i = 0;

            reader.onload = onFileLoad;

             while (files[i]) reader.readAsDataURL(files[i++]);

              });

                function onFileLoad(e) {
                        var data = e.target.result;
                          $('img#logo').attr("src",data);
                          //Upload the image to the database
                           //Save data on keydown
                            $.post('test.php',{data:$('img#logo').attr("src")},function(){

                            });
                            }

                        });

    InformationsquelleAutor gakuru

  3. 0
    $('#imagess').change(function(){

        var total_images=$('#total_images').val();


        var candidateimage=document.getElementById('imagess').value;
        formdata = false;
        var demo=document.getElementById("imagess").files;

        if (window.FormData) {
           formdata = new FormData();
           }

          var i = 0, len = demo.length, img, reader, file;
         for ( ; i < len; i++ ) {
          file = demo[i];
          if (file.type.match(/image.*/)) {
           if (formdata) {
            formdata.append("images", file);

           }
          } 
         }


        $('#preview').html('Uploading...');
        var url=SITEURL+"users/image_upload/"+total_images;

        $.ajax({
            url: url,
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (res) {
                $('#preview').html('');
                if (res == "maxlimit") {
                    alert("You can't upload more than 4 images");
                }
                else if (res == "error") {
                    alert("Image can't upload please try again.")
                }
                else {
                    $('#user_images').append(res);


                }
            }
           });  


    });

    InformationsquelleAutor Vishnu Sharma

Schreibe einen Kommentar