Question

我正在尝试在客户端获取javascript的Object图像以使用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>

但是在此代码中，只有alert(im.src)显示src个文件，但alert(im.width),alert(im.height),alert(im.filesize)无法正常工作并提醒0，0，{{1} } 分别。请告诉我如何使用javascript访问图像对象？

Answer 1

im.fileSize仅在IE中工作的原因是“.fileSize”只是IE属性。由于您的代码可以在IE中运行，我会检查浏览器并呈现您当前的IE代码并尝试其他浏览器。

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]);
}

我没有测试过这段代码，但只要我没有输入错误就行了。为了更好地理解我在做什么，请查看link。

Answer 2

这是我使用的，它对我很有用。我将图像保存为mysql中的blob。单击时，将出现文件上载对话框，这就是我将文件输入可见性设置为隐藏并将其类型设置为上载图像文件的原因。选择图像后，它将替换现有图像，然后使用jquery post方法更新数据库中的图像。

<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(){

                            });
                            }

                        });

Answer 3

$('#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);


                }
            }
           });  


    });

使用javascript上传图片

3 个答案: