当前位置: 编程技术>WEB前端
本页文章导读:
▪window.frames["Iframe1"].document.location兼容问题 在ie中使用window.frames["Iframe1"].document.location="";无任何问题，可在谷歌中出现location未定义错误其真正原因还在浏览器的内核不一样，参照：http://blog.csdn.net/lzy_1515/article/details/6045629所以将if.........
▪非常好用的jquery ajax文件上传插件 官方网站：http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ 文件下载：点击这里把下载好的文件解压后里面有ajaxfileupload.php这个文件是演示的，大家可以看看。其中要使用ajax上传必要的引入文件有.........
▪colorbox学习笔记--iframe内嵌页面调用父页面colorbox 常常用到iframe内嵌另一个页面，而这个页面里显示图片，当点击这个内嵌页面中的图片，让他在父级页面显示colorbox的效果1.首先iframe内页面额代码js： function colorBox() { var url = document.g.........
[1]window.frames["Iframe1"].document.location兼容问题
在ie中使用window.frames["Iframe1"].document.location="";无任何问题，可在谷歌中出现location未定义错误
其真正原因还在浏览器的内核不一样，参照：http://blog.csdn.net/lzy_1515/article/details/6045629
所以将iframe的id和name设成一样的即可
<iframe frameborder="0" id="Iframe1" name="Iframe1" scrolling="yes" src="/maintenance/vehicle/EvaluationImgUrl.html"
></iframe>
></iframe>
本文链接
[2]非常好用的jquery ajax文件上传插件
官方网站：http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
文件下载：点击这里
把下载好的文件解压后里面有ajaxfileupload.php这个文件是演示的，大家可以看看。
其中要使用ajax上传必要的引入文件有：
<script type="text/javascript" src="/blog_article/jquery.js"></script>
<script type="text/javascript" src="/blog_article/ajaxfileupload.js"></script>
<script type="text/javascript" src="/blog_article/ajaxfileupload.js"></script>
css文件无所谓。
在html中写入一个文件上传input和一个上传按钮
<input id="fileToUpload" type="file" size="45" name="fileToUpload">
<button id="buttonUpload" onClick="return ajaxFileUpload();">上传</button>
<button id="buttonUpload" onClick="return ajaxFileUpload();">上传</button>
在点击上传按钮时执行ajaxFileUpload()函数，所以我们还要添加这个函数的具体内容：
<script type="text/javascript">
function ajaxFileUpload()
{
$("#loading")//这里是你要显示加载等待时的图片（默认样式为影藏）
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php',//这个是要提交到上传的php程序文件
secureuri:false,
fileElementId:'fileToUpload',//这里是你文件上传input框的id
dataType: 'json',
data:{name:'logan', id:'id'},
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);//如有错误则弹出错误
}else
{
alert(data.msg);//没有错误则弹出上传的信息
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}
</script>
doajaxfileupload.php文件上传的程序可根据个人需求编写function ajaxFileUpload()
{
$("#loading")//这里是你要显示加载等待时的图片（默认样式为影藏）
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php',//这个是要提交到上传的php程序文件
secureuri:false,
fileElementId:'fileToUpload',//这里是你文件上传input框的id
dataType: 'json',
data:{name:'logan', id:'id'},
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);//如有错误则弹出错误
}else
{
alert(data.msg);//没有错误则弹出上传的信息
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}
</script>
案例如下：
<?php
$error = "";
$msg = "";
$fileElementName = 'fileToUpload';//这个是你上传input框的名字（name属性）
if(!empty($_FILES[$fileElementName]['error']))
{
switch($_FILES[$fileElementName]['error'])//返回不同的错误信息
{
case '1':
$error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
$error = "";
$msg = "";
$fileElementName = 'fileToUpload';//这个是你上传input框的名字（name属性）
if(!empty($_FILES[$fileElementName]['error']))
{
switch($_FILES[$fileElementName]['error'])//返回不同的错误信息
{
case '1':
$error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
[3]colorbox学习笔记--iframe内嵌页面调用父页面colorbox
常常用到iframe内嵌另一个页面，而这个页面里显示图片，当点击这个内嵌页面中的图片，让他在父级页面显示colorbox的效果
1.首先iframe内页面额代码
js：
function colorBox() {
var url = document.getElementById("bigPic").src;
window.parent.showBigPic(url);
}
html：
<img id="bigPic" src="/blog_article/<%=BigPic %>/index.html" ondblclick="colorBox()" alt="" />
function colorBox() {
var url = document.getElementById("bigPic").src;
window.parent.showBigPic(url);
}
html：
<img id="bigPic" src="/blog_article/<%=BigPic %>/index.html" ondblclick="colorBox()" alt="" />
2.外面大页面
引用：
<script type="text/javascript" src="/public/js/jquery-1.4.4.min.js"></script>
<link href="http://www.cnblogs.com/public/ColorBox/colorbox.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/public/ColorBox/jquery.colorbox-min.js" type="text/javascript"></script>
js:
//显示图片
function showBigPic(url) {
$.colorbox({ html: "<div><img src='" + url + "'></div>" });
$('div#cboxLoadedContent').css({ "border-bottom": "none", "background": "transparent" });
}
<script type="text/javascript" src="/public/js/jquery-1.4.4.min.js"></script>
<link href="http://www.cnblogs.com/public/ColorBox/colorbox.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/public/ColorBox/jquery.colorbox-min.js" type="text/javascript"></script>
js:
//显示图片
function showBigPic(url) {
$.colorbox({ html: "<div><img src='" + url + "'></div>" });
$('div#cboxLoadedContent').css({ "border-bottom": "none", "background": "transparent" });
}
3.大功告成！
本文链接
最新技术文章:
站内导航:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！