您可以使用javascript FileReader API显示从文件输入字段提供的图像预览.这非常有用,因为您不必使用服务器端php和ajax来显示图像.
我的问题是:
正在使用的图像文件的大小是否有限制？就像用户要选择20MB的图像一样,文件阅读器是否能够处理它？机器内存可能会被最大化吗？
我目前正在我的机器上进行本地测试.我试图加载一个bmp文件(53MB!),大约需要15秒才能处理并显示在页面上.1/2MB的其他文件通常会立即显示.
它可能不是必需的,但这是我的HTML文件:(仅供参考:此代码在支持的浏览器中运行良好)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Dropzone File Upload</title>
</head>
<body>
<img id="uploadPreview" src="default.png" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<p id="uploadProgress"> </p>
<script type="text/javascript">
function PreviewImage() {
var avatar_image = document.getElementById("uploadImage");
var avatar_preview = document.getElementById("uploadPreview");
var avatar_progress = document.getElementById("uploadProgress");
if ( window.FileReader ) { //if supports filereader
var imgReader = new FileReader();
imgReader.readAsDataURL(avatar_image.files[0]); //read from file input
imgReader.onloadstart = function(e) {
avatar_progress.innerHTML = "Starting to Load";
}
imgReader.onload …是否有可能在jQuery中交换两个容器的位置 - 在视觉上和在DOM中,还可以为结果设置动画？
我有:
<div id="container">
<div id="one"><a class="moveUp">Up</a></div>
<div id="two"><a class="moveUp">Up</a></div>
<div id="three"><a class="moveUp">Up</a></div>
</div>
单击该链接将该div的位置与上面的位置交换.大多数示例使用绝对定位并偏移top属性来实现此目的......但是当用户在其他地方调用函数时,我需要按照屏幕上显示的顺序读取数据.
所以我想出了这个:
$('#container div').on('click', '.moveUp', function() {
divInQuestion = $(this).closest('div').attr('id'); //id of this div
if (divInQuestion > '1') {
switchWithDiv = divInQuestion - 1; //id of other div
firstSelector = $('#chapterset-'+divInQuestion).html(); //save contents of each div. I actually don't
secondSelector = $('#chapterset-'+switchWithDiv).html(); //do it this way, I regenerate the content
$('#chapterset-'+divInQuestion).html()firstSelector.replaceWith(secondSelector); //replace div with other div
$('#chapterset-'+switchWithDiv).html()secondSelector.replaceWith(firstSelector);
}
});
现在,我的代码实际上比这更复杂,但它给出了我正在做的shell.
jQuery工作正常但是,我如何包含动画？
PS:试图让一个jsFiddle去,但他们的服务器可能会下降atm ?? !!？
jQuery队列很烦人 - 我无法理解它...
以下函数包含4个动画,我希望一个接一个地发生(不是同时发生).
function startupAnime() {
$("#header").animate({"opacity":"1"},{duration:3000, queue:"global"});
$("#header").animate({"top":"0px"},{duration:3000, queue:"global"});
&("#loader").animate({"opacity":"0"},{duration:3000, queue:"global"});
$("#background").animate({"background-position" : "300px center"},{duration:3000, queue:"global"});
}
$(window).load(function() {
startupAnime();
})
两个#header元素将一个接一个地动画,但其余的都在同一时间发生.
然后我发现Queue只有在你动画相同的元素时才有效!! 这不是很有用......但是添加队列:"名称"显然应该将它们链接到同一个队列中......虽然这只会阻止他们为我工作.
我在这里错过了什么吗？我不确定队列是否意味着"下一个动画将在当前一个动画完成后开始",或者"这些动画被保存在一个等待你释放它们的队列中"可能是通过调用队列("全局")或其他东西!
大多数建议都讨论动画一个元素,或设置许多函数,并使用回调来"迭代"函数 - 如果你问我,不是很干净.我只是希望能够在我要求时运行动画列表.
注意:动画的"列表"可以一次为一个元素设置动画,但我也可能希望两个或更多元素在列表中的某个点同时进行动画处理.这是一个示例:
animate element A
-> then ->
animate element B
-> then ->
animate element C and D together
-> then ->
animate element E
我正在使用JavaScript来检查变量以查看它是否包含"http://",如果它没有,则将http附加到它.使用下面的代码,但我得到的是刷新页面,/?myURL=并附加到浏览器地址栏.删除if(getUrl.indexOF("http://" == -1)部件将使代码正常工作,但将缺少它包含的功能.我无法弄清楚我哪里出错了.我是否错过了if else语句中的中断或返回？
function placeUrl()
{
var str1 = "http://"
var getUrl;
var newUrl;
getUrl = document.getElementById('usersUrl').value;
if(getUrl != null)
{
if(getUrl.indexOf("http://" == -1)
{
newUrl = str1.concat(getUrl);
}
else
{
newUrl = getUrl;
}
document.getElementById('iframe1').src = newUrl;
}
return false;
}
我的HTML:
<form onSubmit="return placeUrl()">
<input id="usersUrl" type="text" name="myURL" value="Enter a URL..." onblur="if (this.value == '') {this.value = 'Enter a URL...';}" onfocus="if (this.value == 'Enter a URL...') {this.value = '';}">
<input type="submit" value="Analyse">
</form>
我一直在寻找并且无法弄清楚如何从C#中获取一个值到ASPX页面上的标签中.我尝试了很多选择,但没有到达任何地方.
当我的asp页面加载时,使用来自页面url的queryString获取一个值(即mypage.aspx？app = safety)然后运行一个开关来找出在页面上使用的图像URL.
事情是,我得到编译错误"当前上下文中不存在名称'img_small'".您如何看待我的代码？我看不出我错过了什么!
C#:
protected void Page_Load(object sender, EventArgs e)
{
string img_small;
String appName = Request.QueryString["app"];
switch (appName)
{
case "safety":
img_small = "safety-logo.png";
break;
case "files":
img_small = "files-logo.png";
break;
case "drawings":
img_small = "drawings-logo.png";
break;
case "specs":
img_small = "specs-logo.png";
break;
default:
img_small = "idms-logo.png";
break;
}
}
HTML:
<img src='"<%=img_small%>"' />
我正在开发一个移动网站,并在iPhone和Android手机上进行测试.我使用CSS更改了页面上选择框的外观.
这在iPhone浏览器中显示良好,但在Android中不能正确应用样式.原始下拉箭头仍然存在(并且由于height属性而垂直拉伸).
有没有办法告诉浏览器如何在Android设备上设置这个元素的样式？还是不支持？
以下是我的代码示例:
HTML:
<div class="filter-group">
<select class="bigInput" id="f_eventWho" name="f_eventWho" tabindex="1">
<option id="f_public" selected="selected">For Everyone</option>
<option id="f_private">By invitation</option>
<option id="f_both">All Gatherings</option>
</select>
</div>
CSS:
.bigInput
{width: 125px;
height: 50px;
background-size: 15px;
background: rgb(159, 209, 225) url(../img/small_down_arrow_20.png) no-repeat right;
border: none;
margin: 5px;
font-size: 14px;
}