0
如果您在Firefox和IE中打开小提琴http://jsfiddle.net/FyJR3/3，并且选择本地图像 - Div背景图像不显示在ie - 但它显示在Firefox中 - 所以我正在寻找一个解决这个跨浏览器的不兼容性:) - 也请注意它不使用jQuery - 它使用prototype.js和scriptaculous .js文件我无法在输入类型文件中使用onchange更改div背景图像 - 通过JavaScript for IE和Safari - 适用于FF和Chrome
我在JavaScript中的新手和已经修改，并从stackoverflow.com使用别人的代码，以使Visual克罗珀我的网站 - 我用的是INPUT TYPE =文件
<input id="attach1" name="attach1" type="file" size=60 style="width:390px;">
这是我试图改变的divs（不会在IE和Safari中工作）在Firefox和Chrome中工作 - 额外的<div></div>是来自另一个人在这个板上的答案，以类似的（不是相同的问题） - 他们没有区别，可以删除。 clear512px.png只是一个清晰的512px正方形覆盖图，可以让div打开并且适合剪裁。就在</body>标记之前
<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>
我有以下两个脚本在页面的底部 - （在Firefox和Chrome至今代码不会没有它的工作） - 这适用于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”分区显示它 - 以便用户能看到它 - ，其余的缩放和裁剪的代码是功能性的 - 它托管在Windows服务器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> (Max Image Size per upload is 8 MB, Images will be resized)
<br><br>
<strong>1</strong>/ Choose an image <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" />
<label for="y1">y1:</label>
<input type="text" name="y1" id="y1" />
<label for="x2">x2:</label>
<input type="text" name="x2" id="x2" />
<label for="y2">y2:</label>
<input type="text" name="y2" id="y2" />
<label for="width">width:</label>
<input type="text" name="width" id="width" />
<label for="height">height</label>
<input type="text" name="height" id="height" />
</div>
<br /><strong>3</strong>/ Upload your image to server
<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。净/ FyJR3/3/
因此，在总结
如果你打开Firefox和IE的小提琴和，当你选择一个本地图像 - 图像不DISPLY在IE浏览器 - 但它确实显示在Firefox - 所以我期待找到一个解决这个跨浏览器incompatability :) - 也注意它不是jQuery - 它是prototype.js和scriptaculous.js - 谢谢
经过多次试验和错误和研究 - 我开始相信没有像样的答案 - 我现在需要考虑修改后的方法 - 并且在完成裁剪之前需要对完整文件进行升级 - 我也可以按照以下顺序进行操作： - 选择文件，上传文件，查看上传的文件以进行裁剪，发送作物信息和作物（复制到所需的文件名和大小/大拇指。对于用户来说几乎是相同的时间，除了下载所需的时间从服务器查看原始文件 –
我可以通过调整第二个温度来缩短下载时间科幻le到512x512px - 所以没有8mb的文件需要下载，只是为了一个拇指类型的视图） - 我不相信在这个时代，浏览器和标准是如此缺乏： –