10

我正在尝试Object在客户端获取 javascript 的图像以使用 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分别发出警报。请告诉我如何使用 javascript 访问图像对象？0undefined

4

3 回答 3

9

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

我没有测试过这段代码，但只要我没有错别字，它应该可以工作。为了更好地了解我在这里所做的事情，请查看此链接。

于 2012-11-14T07:21:04.740 回答
0

这就是我使用的，它对我很有用。我将图像保存为 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(){

                            });
                            }

                        });
于 2013-01-24T11:32:39.447 回答
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);


                }
            }
           });  


    });
于 2013-09-03T11:49:35.763 回答