猫#1293
展开↯#1294
作者：广西南宁市
仿造唯品会头部banner大图广告模特闪边ad图js效果
<style>
.j-sp-ani{width:260px;height:610px;position: absolute;right:131px;top:58px;background: url(https://out.img.pan.lizhenqiu.com/eaeca7a66e50b79338bdedc10bdc45341497326196000) no-repeat;
-webkit-animation:run 6.2s steps(8, end) infinite;
-moz-animation:run 6.2s steps(8, end) infinite;
-ms-animation:run 6.2s steps(8, end) infinite;
-o-animation:run 6.2s steps(8, end) infinite;
animation:run 6.2s steps(8, end) infinite;
}
@-webkit-keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
@-moz-keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
@-ms-keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
@-o-keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
@keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
</style><div class="j-sp-ani"></div>Run code
Cut to clipboard
文章：奇妙的 CSS shapes(CSS图形) 发表时间：2017-06-13, 11:58:37
#1295
作者：广西南宁市
请问博主，下面的代码运行以后为什么不显示红色呢？
如何用单线程来解释？
如何用单线程来解释？
<div style="height:30px"></div><script>var el = document.getElementsByTagName('div');
el[0].style.backgroundColor = 'red';
for (var i=0; i< 2000000; i++) {
}
el[0].style.backgroundColor = 'green';</script>Run code
Cut to clipboard
<div style="height:30px" onclick="rr();"></div><script>
function rr(){
var el = document.getElementsByTagName('div');
el[0].style.backgroundColor = 'red';
setTimeout(function(){for (var i=0; i< 2000000; i++) {
el[0].style.backgroundColor = 'green';
}},0);}
</script>Run code
Cut to clipboard
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 10:38:01
#1297
作者：广西南宁市
有一个疑问，
按照说的，确实是这么运行的，但是如果我debugger的时候，为什么就首先能显示了呢?
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:29:04
#1298
作者：广西南宁市
好文，之前看了阮老师那篇看的一头雾水，看了你的这篇感觉懂了好多，敢问楼主是怎么学的？从那里查到这些资料？国外社区？
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:28:21
#1299
展开↯#1300
作者：广西南宁市
在js或者node里经常听到一个词 异步, 同步我可以理解就是按照顺序一个一个执行,多线程我也可以理解就是再开一个线程去处理别的事情,但是异步到底是什么意思,异步和多线程有什么区别呢?
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:25:05
#1301
作者：广西南宁市
“dom操作是异步的”不知楼主从哪得出的结论。
照这个结论下去，当你做一次dom操作，想获取dom的最新结果就得写个settimeout，那还有法写代码吗？
在一个空内容页面加入下面js,
打开页面,你可以看到控制台一直在打印'渲染好了就出来吧',但是页面仍然是空白,因为"document.body.innerHTML = '渲染好了就出来吧';"这段js已经执行,js引擎已经知道了body里面有东西,但是由于后面一个死循环js一直在跑,所以GUI引擎是没有机会渲染的,所以你说的"做一次dom操作，想获取dom的最新结果"和"做一次dom操作，想看到dom的最新渲染结果"是两码事~
照这个结论下去，当你做一次dom操作，想获取dom的最新结果就得写个settimeout，那还有法写代码吗？
在一个空内容页面加入下面js,
<script type="text/javascript">
document.body.innerHTML = '渲染好了就出来吧';
while(true){
console.log(document.body.innerHTML);
}
</script>Run code
Cut to clipboard
打开页面,你可以看到控制台一直在打印'渲染好了就出来吧',但是页面仍然是空白,因为"document.body.innerHTML = '渲染好了就出来吧';"这段js已经执行,js引擎已经知道了body里面有东西,但是由于后面一个死循环js一直在跑,所以GUI引擎是没有机会渲染的,所以你说的"做一次dom操作，想获取dom的最新结果"和"做一次dom操作，想看到dom的最新渲染结果"是两码事~
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:24:10
#1302
作者：广西南宁市
我理解的是js改变了DOM的话也是通过渲染的方式进行的, 那么只需要把这个渲染事件加到GUI引擎的事件队列即可, 这样子不也可以实现引擎同步运作而且DOM的变化也渲染了.请问下各位,我哪里理解错了, 谢谢了.
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:23:49
#1303
作者：广西南宁市
《javascript忍者》讲到 定时器最低时间间隔，不能是SetTimeout（fn，4），常见是10
不过楼主讲得很好，不知道是从哪学到的，能说一下吗？
不过楼主讲得很好，不知道是从哪学到的，能说一下吗？
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:23:20
#1304
作者：广西南宁市
其实，对JS引擎的讲解挺好啦，不过，在settimeout 和 set interval 这二个函数如果能做一些对比就更好。同时增加一些优缺点和应用场景就更好了。
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:22:19
#1305
作者：广西南宁市
settimeout却是需要深入理解. HTML的渲染和JS的操作. 前段时间封装Angualrjs指令的时候. 遇到有的问题就是因为没有加settimeout(fn,0). 导致NG里面的link里面的一些操作无法再HTML Dom上起效.
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:22:06
#1306
作者：广西南宁市
js的实际经验，这些东西理解起来真的很吃力。
我还有是有一点点困惑，对于js 的事件队列与执行的队列有什么区别么？只有settimeout(0)可以放到队列尾部，改变实际实行顺序么？
我还有是有一点点困惑，对于js 的事件队列与执行的队列有什么区别么？只有settimeout(0)可以放到队列尾部，改变实际实行顺序么？
// 结果Btn1 > Btn all > Btn2 ，预想是Btn all > Btn1 > Btn2
document.querySelector('#status_btns').onclick = function () {
document.querySelector('#status_btns1').onclick();
alert("Btn all");
document.querySelector('#status_btns2').onclick();
};
document.querySelector('#status_btns1').onclick = function () {
alert("Btn 1");
};
document.querySelector('#status_btns2').onclick = function () {
alert("Btn 2");
};Run code
Cut to clipboard
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:21:51
#1307
作者：广西南宁市
与我给出的calculating 的例子是相同的. dom操作是异步的,el[0].style.backgroundColor = 'red'; 异步操作不会立马执行,而是生成一个事件插入到事件队列的最后面,接着执行for循环,然后到el[0].style.backgroundColor = 'green'; 这句,又插入一个事件到队列里面. 这时队列里面有2个dom渲染的事件挨在一起. 其实它们都是执行了的,只不过速度太快,你只能看到最后的一个渲染结果. 本质问题是代码的执行顺序变了, 是先执行了for , 然后 dom,dom. 解决办法就是让for 也异步插入一个事件到队列尾部. 就变成dom,for,dom. 这样就能实时反馈渲染了.
<div style="height:30px"></div><script>
var el = document.getElementsByTagName('div');
el[0].style.backgroundColor = 'red';
setTimeout(function(){for (var i=0; i< 2000000; i++) {
el[0].style.backgroundColor = 'green';
}},0);
</script>Run code
Cut to clipboard
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:20:44
#1308
作者：广西南宁市
原生js，获取url ？号 #号后的对应键值对
<!DOCTYPE html>
<html>
<head>
<title>获取url？#号后面键值对</title>
</head>
<body>
<script type="text/javascript">
getUrlParam=function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2])
}else{
return null;
}
}
getUrlHash= function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.hash.substr(1).match(reg);
if (r != null) {
return unescape(r[2])
}else{
return null;
}
}
alert(getUrlParam("mod"));//xx要获取的键名
alert(getUrlHash("xx"));
</script>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-13, 10:21:38
#1309
作者：广西南宁市
原生js尝试一个循环绑定和dataset方法输出index
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原生js尝试一个循环绑定和dataset方法输出index</title>
<style type="text/css">
li {
background-color: #ddd;
padding: 8px;
margin: 18px 0;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
<li>第6个li</li>
<li>第7个li</li>
</ul>
<script>
var cc = document.getElementsByTagName('li');
for(var i = 0; i < cc.length; i++) {
cc[i].dataset.user = i; //添加index
cc[i].onclick = function(){ //循环绑定click
alert("Index: "+this.dataset.user);
}
}
</script>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-13, 10:10:09
#1310
作者：广西南宁市
四种纯css进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Progress</title>
<style>
*+.tg-progress {
margin-top: 15px;
}
.tg-progress {
box-sizing: border-box;
height: 20px;
margin-bottom: 15px;
background: #f7f7f7;
overflow: hidden;
line-height: 20px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), inset 0 2px 2px rgba(0, 0, 0, .07);
border-radius: 4px;
}
.tg-progress-bar {
width: 0;
height: 100%;
background: #009dd8;
float: left;
-webkit-transition: width .6s ease;
transition: width .6s ease;
font-size: 12px;
color: #fff;
text-align: center;
background-image: -webkit-linear-gradient(top, #00b4f5, #008dc5);
background-image: linear-gradient(to bottom, #00b4f5, #008dc5);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .1);
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
}
.tg-progress-striped .tg-progress-bar {
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 30px 30px;
}
.tg-progress-striped.tg-active .tg-progress-bar {
-webkit-animation: tg-progress-bar-stripes 2s linear infinite;
animation: tg-progress-bar-stripes 2s linear infinite;
}
@keyframes tg-progress-bar-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 30px 0;
}
}
.tg-progress-danger .tg-progress-bar {
background-color: #d32c46;
}
</style>
</head>
<body>
<div class="tg-progress">
<div class="tg-progress-bar" style="width: 40%;">40%</div>
</div>
<div class="tg-progress tg-progress-striped">
<div class="tg-progress-bar" style="width: 65%;"></div>
</div>
<div class="tg-progress tg-progress-striped tg-active">
<div class="tg-progress-bar" style="width: 85%;"></div>
</div>
<div class="tg-progress tg-progress-striped tg-active tg-progress-danger">
<div class="tg-progress-bar" style="width: 85%;"></div>
</div>
</body>
</html>Run code
Cut to clipboard
文章：奇妙的 CSS shapes(CSS图形) 发表时间：2017-06-13, 10:08:47
#1311
作者：广西南宁市
<script>
var box=document.getElementById('contentadddd');
function putb64(picurl,pickey,token){
var pic = picurl.substring(22);
/*通过base64编码字符流计算文件流大小函数*/
function fileSize(str){
var fileSize;
if(str.indexOf('=')>0)
{
var indexOf=str.indexOf('=');
str=str.substring(0,indexOf);//把末尾的’=‘号去掉
}
fileSize=parseInt(str.length-(str.length/8)*2);
return fileSize;
}
/*把字符串转换成json*/
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}
var url = "https://upload.qbox.me/putb64/-1";
//"+fileSize(pic)+"/key/"+pickey; //非华东空间需要根据注意事项 1 修改上传域名 "+fileSize(pic)+"/key/"+pickey
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
var data=xhr.responseText;
//console.log(data);
data=strToJson(data);
//console.log(data);
//data=strToJson(data.key);
$('.watermark').hide();
codeanddd('contentadddd','
');
$('#myCanvasimgpuppmain').hide();
submitinputtvllsscccc("上传成功！");
//data=JSON.parse(data);
}
}
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken "+token);
xhr.send(pic);
}
$('body').on('paste','#contentadddd' , function(event){
//alert(event.originalEvent);
//console.log(event.originalEvent);
var e=event.originalEvent;
//box.addEventListener("paste", function(e) {alert(event);
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.items.length) {
var clipboardData = e.clipboardData,
type = clipboardData.types;
if (type.indexOf('Files') !== -1) {
var item = clipboardData.items[0],
reader = new FileReader();
reader.onload = function(event) {
var img = document.createElement('img');
img.src = event.target.result;
img.onload = function () {
var canvas = document.getElementById("myCanvasimgpupp");
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 55, 55);
}
$('#myCanvasimgpuppmain').show();
$('#submitinputtvllss').text("正在上传..");
//console.log(img.src);
$.ajax( {
url: '/outblog.php?pastimgvassss=base64', //这里是静态页的地址
type: "GET", //静态页用get方法，否则服务器会抛出405错误
dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
//data=JSON.parse(data);
//alert(file);
var upToken=data.upToken;
var nnaame=data.nnaame;
putb64(img.src,data.cccodejj,upToken)
}
});
//document.body.appendChild(img);
}
if (item.kind === 'string' && clipboardData.items[1]) {
item = clipboardData.items[1];
}
reader.readAsDataURL(item.getAsFile());
}
}
//return false;
})
// box为被拖放的区域
$('body').on('dragover','#contentadddd' , function(event){
var e=event.originalEvent;
//box.addEventListener('dragover', function (e) {
e.preventDefault(); // 必须阻止默认事件
});//, false
$('body').on('drop','#contentadddd' , function(event){
var e=event.originalEvent;
//box.addEventListener('drop', function (e) {
e.preventDefault(); // 阻止默认事件
var file = e.dataTransfer.files[0]; //获取文件
// code
upperCase(file);
$('#myCanvasimgpuppmain').show();
$('#submitinputtvllss').text("正在上传..");
$.ajax( {
url: '/outblog.php', //这里是静态页的地址
type: "GET", //静态页用get方法，否则服务器会抛出405错误
dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
//data=JSON.parse(data);
//alert(file);
var upToken=data.upToken;
var nnaame=data.nnaame;
var xhr = new XMLHttpRequest,
fd = new FormData;
xhr.open('POST', 'https://up.qbox.me', true); // 'url'
//可以通过progress事件监听上传进度
xhr.onload = function() {
// 上传完成
//alert(nnaame);
$('.watermark').hide();
codeanddd('contentadddd','
');
$('#myCanvasimgpuppmain').hide();
submitinputtvllsscccc("上传成功！");
}
//
fd.append('file', file); // 'file'
fd.append('key', nnaame);
fd.append('token', upToken);
xhr.send(fd);
}
});
return false;
// file为前面获得的
var url = window.URL.createObjectURL(file);
var img = new Image;
img.src = url;
// 加到dom
console.log(url);
upperCase(file);
$('#myCanvasimgpuppmain').show();
});//, false
</script>Run code
Cut to clipboard
<script>
var box=document.getElementById('contentadddd');
function putb64(picurl,pickey,token){
var pic = picurl.substring(22);
/*通过base64编码字符流计算文件流大小函数*/
function fileSize(str){
var fileSize;
if(str.indexOf('=')>0)
{
var indexOf=str.indexOf('=');
str=str.substring(0,indexOf);//把末尾的’=‘号去掉
}
fileSize=parseInt(str.length-(str.length/8)*2);
return fileSize;
}
/*把字符串转换成json*/
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}
var url = "https://upload.qbox.me/putb64/-1";
//"+fileSize(pic)+"/key/"+pickey; //非华东空间需要根据注意事项 1 修改上传域名 "+fileSize(pic)+"/key/"+pickey
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
var data=xhr.responseText;
//console.log(data);
data=strToJson(data);
//console.log(data);
//data=strToJson(data.key);
$('.watermark').hide();
codeanddd('contentadddd','[imgs]http://out.img.pan.lizhenqiu.com/'+data.key+'[/imgs]');
$('#myCanvasimgpuppmain').hide();
submitinputtvllsscccc("上传成功！");
//data=JSON.parse(data);
}
}
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken "+token);
xhr.send(pic);
}
$('body').on('paste','#contentadddd' , function(event){
//alert(event.originalEvent);
//console.log(event.originalEvent);
var e=event.originalEvent;
//box.addEventListener("paste", function(e) {alert(event);
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.items.length) {
var clipboardData = e.clipboardData,
type = clipboardData.types;
if (type.indexOf('Files') !== -1) {
var item = clipboardData.items[0],
reader = new FileReader();
reader.onload = function(event) {
var img = document.createElement('img');
img.src = event.target.result;
img.onload = function () {
var canvas = document.getElementById("myCanvasimgpupp");
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 55, 55);
}
$('#myCanvasimgpuppmain').show();
$('#submitinputtvllss').text("正在上传..");
//console.log(img.src);
$.ajax( {
url: '/outblog.php?pastimgvassss=base64', //这里是静态页的地址
type: "GET", //静态页用get方法，否则服务器会抛出405错误
dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
//data=JSON.parse(data);
//alert(file);
var upToken=data.upToken;
var nnaame=data.nnaame;
putb64(img.src,data.cccodejj,upToken)
}
});
//document.body.appendChild(img);
}
if (item.kind === 'string' && clipboardData.items[1]) {
item = clipboardData.items[1];
}
reader.readAsDataURL(item.getAsFile());
}
}
//return false;
})
// box为被拖放的区域
$('body').on('dragover','#contentadddd' , function(event){
var e=event.originalEvent;
//box.addEventListener('dragover', function (e) {
e.preventDefault(); // 必须阻止默认事件
});//, false
$('body').on('drop','#contentadddd' , function(event){
var e=event.originalEvent;
//box.addEventListener('drop', function (e) {
e.preventDefault(); // 阻止默认事件
var file = e.dataTransfer.files[0]; //获取文件
// code
upperCase(file);
$('#myCanvasimgpuppmain').show();
$('#submitinputtvllss').text("正在上传..");
$.ajax( {
url: '/outblog.php', //这里是静态页的地址
type: "GET", //静态页用get方法，否则服务器会抛出405错误
dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
//data=JSON.parse(data);
//alert(file);
var upToken=data.upToken;
var nnaame=data.nnaame;
var xhr = new XMLHttpRequest,
fd = new FormData;
xhr.open('POST', 'https://up.qbox.me', true); // 'url'
//可以通过progress事件监听上传进度
xhr.onload = function() {
// 上传完成
//alert(nnaame);
$('.watermark').hide();
codeanddd('contentadddd','[imgs]http://out.img.pan.lizhenqiu.com/'+nnaame+'[/imgs]');
$('#myCanvasimgpuppmain').hide();
submitinputtvllsscccc("上传成功！");
}
//
fd.append('file', file); // 'file'
fd.append('key', nnaame);
fd.append('token', upToken);
xhr.send(fd);
}
});
return false;
// file为前面获得的
var url = window.URL.createObjectURL(file);
var img = new Image;
img.src = url;
// 加到dom
console.log(url);
upperCase(file);
$('#myCanvasimgpuppmain').show();
});//, false
</script>Run code
Cut to clipboard
文章：上传base64图片到七牛云存储 发表时间：2017-06-13, 10:06:23
最近在做一个图片上传的功能，出现提交一次后，file输入框的change事件无法再次触发的bug，就是说提交一次后必须刷新才能再次提交，这就坑了~
于是想办法解决它~
在网上找了一些资料，找到这几种方法：
1、替换掉原来的input框
2、remove原来的input框，然后在添加进新的一样的input框
我测试了之后发现可以用下面的方法解决这个问题：
第一步：上传完成后替换掉原来的input框
第二步：重新绑定onchange事件
<script> $(document).ready(function () { /* jquery handleError版本兼容 */ jQuery.extend({ handleError: function (s, xhr, status, e) { if (s.error) { s.error.call(s.context || s, xhr, status, e); } if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } }, httpData: function (xhr, type, s) { var ct = xhr.getResponseHeader("content-type"), xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0, data = xml ? xhr.responseXML : xhr.responseText; if (xml && data.documentElement.tagName == "parsererror") throw "parsererror"; if (s && s.dataFilter) data = s.dataFilter(data, type); if (typeof data === "string") { if (type == "script") jQuery.globalEval(data); if (type == "json") data = window["eval"]("(" + data + ")"); } return data; } }); /* file输入框变化时调用上传图片函数 */ $(".myFile").change(function(){ var objId = $.trim($(this).attr('id')); myUpload(objId); }); /* 上传函数 */ function myUpload(objId) { var _obj = $('#'+objId); var objVal = $.trim(_obj.val()); if(!objVal){ alert('你还未选择图片！'); return false; } $.ajaxFileUpload({ type: "post", url: "upload.do", secureuri:false, fileElementId:objId, dataType: "json", success: function(result) { if (result.code == "1") { alert("上传文件成功！"); } }, complete: function(xmlHttpRequest) { _obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>'); $("#"+objId).on("change", function(){ myUpload(objId); }); }, error: function(data, status, e) { alert("文件上传失败!"); } }); return false; } }); </script><script> $(document).ready(function () { /* jquery handleError版本兼容 */ jQuery.extend({ handleError: function (s, xhr, status, e) { if (s.error) { s.error.call(s.context || s, xhr, status, e); } if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } }, httpData: function (xhr, type, s) { var ct = xhr.getResponseHeader("content-type"), xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0, data = xml ? xhr.responseXML : xhr.responseText; if (xml && data.documentElement.tagName == "parsererror") throw "parsererror"; if (s && s.dataFilter) data = s.dataFilter(data, type); if (typeof data === "string") { if (type == "script") jQuery.globalEval(data); if (type == "json") data = window["eval"]("(" + data + ")"); } return data; } }); /* file输入框变化时调用上传图片函数 */ $(".myFile").change(function(){ var objId = $.trim($(this).attr('id')); myUpload(objId); }); /* 上传函数 */ function myUpload(objId) { var _obj = $('#'+objId); var objVal = $.trim(_obj.val()); if(!objVal){ alert('你还未选择图片！'); return false; } $.ajaxFileUpload({ type: "post", url: "upload.do", secureuri:false, fileElementId:objId, dataType: "json", success: function(result) { if (result.code == "1") { alert("上传文件成功！"); } }, complete: function(xmlHttpRequest) { _obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>'); $("#"+objId).on("change", function(){ myUpload(objId); }); }, error: function(data, status, e) { alert("文件上传失败!"); } }); return false; } }); </script>