javascript - 我无法让 div 背景图像随着输入类型文件中的 onchange 进行更改 - 通过 Javascript 用于 IE 和 Safari - 适用于 FF 和 Chrome

Question

如果您在 Firefox 和 IE 中打开小提琴http://jsfiddle.net/FyJR3/3并且当您选择本地图像时 - Div 背景图像不会在 ie 中显示 - 但它会在 Firefox 中显示 - 所以我正在寻找找到解决这个跨浏览器不兼容性的解决方案 :) - 还要注意它不使用 jQuery - 它使用原型.js 和 scriptaculous.js

我是 Javascript 的新手，并且已经修改并使用了来自 stackoverflow.com 的其他代码，为我的网站制作 Visual Cropper - 我使用 Input type=File

<input id="attach1" name="attach1" type="file" size=60 style="width:390px;">

这是我正在尝试更改的 div（在 IE 和 Safari 中不起作用）在 Firefox 和 Chrome 中工作 - 额外<div></div>的是其他人在此板上对类似问题的回答（不是同一个问题）的建议 - 他们没有差异，可以删除。clear512px.png 只是一个清晰的 512px 方形叠加层，用于保持 div 打开并保持裁剪大小。（没有它，代码将无法工作 - 到目前为止在 Firefox 和 chrome 中）

<div style="width:512px; height:512px;">
    <div></div>
    <div id="theImageToCrop" align="center" style="background-image: url(../pics/No-Image.jpg); background-position:center; background-repeat:no-repeat; background-size:contain; max-height:512px; max-width:512px; width:100%; border: 1px solid #808080; position: relative;">
        <div></div>
        <div id="testWrap" style="height:512px; width:512px; text-align:center; vertical-align:middle;">
        <div></div>
            <img src="../cropper/tests/clear512px.png" src= alt="test image" id="testImage" style="width:100%;" />
        </div>
    </div>
</div>

</body>我在标签之前的页面底部有以下两个脚本- 这适用于 chrome 和 Firefox - 但不适用于 IE 和 Safari

<script type="text/javascript">
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
alert(i + " " + files[i]);
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
          reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
         var div0 = document.getElementById('theImageToCrop');
            div0.style.backgroundImage = "url(" + e.target.result + ")";
       };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }  

  document.getElementById('attach1').addEventListener('change', handleFileSelect, false);
</script>

<script type="text/javascript">
(window.onload = function(){

var img = document.getElementById('theImageToCrop').style.backgroundImage;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

我需要做的是显示输入中的文件（图像）并将其显示在 ID="theImageToCrop" Div 中 - 以便用户可以看到它 - 其余用于缩放和裁剪的代码是功能性的 -它托管在 Windows Server 2008 上 - 我的主要服务器代码是 ASP 经典代码 - 带有少量 ASP.net，显然是 Javascript（我的弱点），并且还加载并使用了“prototype.js”、“scriptaculous.js”和“cropper”。 js" 脚本源 - 不使用 jQuery。

我还是 JS 的新手，所以请你让答案/推理尽可能简单

非常感谢您的帮助 - 提前致谢

- - - - 在下面添加了完整代码 * * * * * *

下面是一个更轻的页面的完整代码，我需要使用它来获得结果 - 这是在http://www.VintageAntiqueRetro.com/testcropping.asp上直播的- 但是页面被剥夺了上传功能（上传部分工作对待） - 我只需要能够选择 1（一个）文件并在所有浏览器中更改 div。多谢你们：）

<%@ Language=VBScript %> 
<% option explicit 
Response.Expires = -1
Server.ScriptTimeout = 600
Session.CodePage  = 65001
Dim thispageaddress, adStateOpen, sPicNum, oldfile, fm, itisdone, jpeg
Dim errMsgs, verified, ulog, thelistingnum, origdir, smdir, meddir, lgdir
Dim lwidth, lheight, aspectratio, newheight, newwidth, SaveFile, newPath
Dim filepath, DesiredWidth, DesiredHeight, quality, newfile, resizescale
Dim dy, dy1, dx, dx1, sx1, sx2, sy1, sy2
Dim swidth, sheight, sx1a, sx2a, sy1a, sy2a, sheighta, swidtha, blankspace
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../login.css">
<script src="js/admin.js" type="text/javascript" language="javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js" type="text/javascript"></script>
<script src="cropper/cropper.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    function onEndCrop( coords, dimensions ) {
        $( 'x1' ).value = coords.x1;
        $( 'y1' ).value = coords.y1;
        $( 'x2' ).value = coords.x2;
        $( 'y2' ).value = coords.y2;
        $( 'width' ).value = dimensions.width;
        $( 'height' ).value = dimensions.height;
    }

    // with a supplied ratio
    Event.observe( 
        window, 
        'load', 
        function() { 
            new Cropper.Img( 
                'testImage', 
                { 
                    ratioDim: { x: 500, y: 500 }, 
                    displayOnInit: true, 
                    onEndCrop: onEndCrop 
                } 
            ) 
        } 
    );
</script>

<style type="text/css">
    input { 
        width: 40px;
    }

</style>

<script type="text/javascript">
(function() {

var img = document.getElementById('theImageToCrop').backgroundImage;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

<script>
function onSubmitForm() {
    var formDOMObj = document.frmSend;
    if (formDOMObj.attach1.value == "")
        alert("Please press the Browse button and pick a file.")
    else
        return true;
    return false;
}
</script>
<TITLE>Upload Listing Pics to the server</TITLE>
</HEAD>
<div style="padding:25px;">
    <form name="frmSend" method="POST" enctype="multipart/form-data" accept-charset="utf-8" action="testcropping.asp?" onSubmit="return onSubmitForm();">
    <Strong>Upload Image File to Server: </Strong>&nbsp; (Max Image Size per upload is 8 MB, Images will be resized)
    <br><br>
    <strong>1</strong>/ Choose an image &nbsp; <input id="attach1" name="attach1" type="file" size=60 style="width:390px;"><br>
    <br /> 
    <strong>2</strong>/ Position/zoom the crop box<font style="font-size:9px;"> (use mouse on corners to zoom, hold left mouse button and drag to move position)</font><br />
    <div style="width:512px; height:512px;"><div></div>
    <div id="theImageToCrop" align="center" style="background-image: url(../pics/No-Image.jpg); background-position:center; background-repeat:no-repeat; background-size:contain; max-height:512px; max-width:512px; width:100%; border: 1px solid #808080; position: relative;"><div></div>
        <div id="testWrap" style="height:512px; width:512px; text-align:center; vertical-align:middle;"><div></div>
            <img src="../cropper/tests/clear512px.png" src= alt="test image" id="testImage" style="width:100%;" />
        </div>
    </div>
</div>

<div style="padding-top:5px;">
        <label for="x1">x1:</label>
        <input type="text" name="x1" id="x1" />
        &nbsp;&nbsp; 
        <label for="y1">y1:</label>
        <input type="text" name="y1" id="y1" />
        &nbsp;&nbsp; 
        <label for="x2">x2:</label>
        <input type="text" name="x2" id="x2" />
        &nbsp;&nbsp; 
        <label for="y2">y2:</label>
        <input type="text" name="y2" id="y2" />
        &nbsp;&nbsp; 
        <label for="width">width:</label>
        <input type="text" name="width" id="width" />
        &nbsp;&nbsp; 
        <label for="height">height</label>
        <input type="text" name="height" id="height" />
</div>      
        <br /><strong>3</strong>/ Upload your image to server &nbsp; 

    <input style="margin-top:4px; background-color:#E9E9E9; width:150px;" type=submit value="Click here to Upload">
    </form>
    <br />
</div>
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
          reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
         var div0 = document.getElementById('theImageToCrop');
            div0.style.backgroundImage = "url(" + e.target.result + ")";
       };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }  

  document.getElementById('attach1').addEventListener('change', handleFileSelect, false);
</script>
</BODY>
</HTML>

我在这里有一个小提琴示例供您在不同的浏览器（ff/ie/chrome/safari）中查看-> jsfiddle.net/FyJR3/3/

总而言之

如果您在 Firefox 和 IE 中打开小提琴，并且当您选择本地图像时 - 图像在 ie 中不显示 - 但它确实显示在 Firefox 中 - 所以我正在寻找解决这个跨浏览器不兼容性的解决方案:) - 还有注意它不是 jQuery - 它是prototype.js 和 scriptaculous.js - 谢谢

score 0 · Accepted Answer

您使用的代码似乎比它必须复杂得多。如果您只需要用户加载单个文件，那么我们不必遍历多个文件。

$('#file').on('change', function(evt){
    var file = evt.target.files[0];
    if(file.type.match('image.*')){
        var reader = new FileReader();
        reader.onload = (function(file){
            return function(e){
                $('#view').css({
                    'background-image': 'url(' + e.target.result +')'
                });
            }
        })(file);
    }

    reader.readAsDataURL(file);
})

试试这个小提琴

score 0 · Accepted Answer

不是一个答案，只是一个简短的解释：Internet Explorer < 10 不支持您在尝试获取 input.files[0] 时使用的文件 API。所以类型永远不会匹配，并且永远不会设置阅读器（尽管我相信阅读器在 IE 中也不支持）。不幸的是，我正在研究类似的问题，大多数提到的选项是使用闪存或将图像上传到临时文件。

IE 对 Fiel API 的支持：http://caniuse.com/#search=file%20api

文件 API：http ://www.w3.org/TR/FileAPI/

javascript - 我无法让 div 背景图像随着输入类型文件中的 onchange 进行更改 - 通过 Javascript 用于 IE 和 Safari - 适用于 FF 和 Chrome

2 回答 2

Related

Reference