10

ObjectjQueryを使用して送信するためにクライアント側でjavascriptの時点で画像を取得しようとしています

<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)を表示しているだけで、正しく機能しておらず、それぞれ警告を発しています。javascriptを使用して画像オブジェクトにアクセスする方法を教えてください。srcalert(im.width),alert(im.height),alert(im.filesize)00undefined

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 に答える