麻蛋,ie 系列一直上传不成功,其他正常,困扰多年,估计是ie 必须input type=file为显示时候,才能正常 代码如下
----------------------------------如下代码-------------------
<!DOCTYPE HTML>
<html>
<%@ page contentType="text/html;charset=UTF-8"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索</title>
<link href="img/imgstyle1.css" rel="stylesheet" type="text/css" />
<link href="img/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script src="jqueryupload/last/1.9.1.min.js"></script>
<script src="jqueryupload/last//vendor/jquery.ui.widget.js"></script>
<script src="jqueryupload/last//jquery.iframe-transport.js"></script>
<script src="jqueryupload/last//jquery.fileupload.js"></script>
<script src="js/jquery.imgareaselect.pack.js" type="text/javascript"></script>
<script src="js/jquery.form.min.js" type="text/javascript"></script>
<script type="text/javascript">
function type(type){
var bbb="";
$.each(type, function() {
bbb=bbb+'<a href='+this.url+' target="_blank" class="button">'+this.name+'</a>';
});
$(".bbb").html(bbb);
}
function array(array){var table="";
$.each(array, function() {
console.log("-----upload finsh ,----------"+this.user_name);
table=table+'<li><a href='+this.url+'><div class=bclass><img src="'+this.pic+'" ></div><p class=ulidp>'+this.title+
'</p> <p class=line><i class=goodslist-item-money>价格:'+this.price+' 元</i><b class=ulidload>'+this.user_name+'</b> </p></p></li>';
});
$("#ulid").html(table);
}
var ias ;
function searchsimple(){$("#gifimg").css("display","block");
$(".bbb").css("display","none");
var tmp = {
'img': $("#photo")[0].src
}
$.post("JqueryUploadSimple/getimg",tmp,function(data){
console.info('re..... '+data);
$("#gifimg").css("display","none");
$(".bbb").css("display","block"); var obj = eval('(' + data + ')');
type(obj.type);
array(obj.array);
});
}
function search(){
var urlindexOf=''+$("#photo")[0].src;
if(urlindexOf.indexOf("photo193")!=-1){
alert('请上传图片');
return ;
}urlindexOf=$('input[name="picwidth"]').val();
if( urlindexOf=="")
{
console.info('直接搜索图片');
searchsimple();
return ;
}
var param = {
'x1': $('input[name="x1"]').val(),
'y1': $('input[name="y1"]').val(),
'x2': $('input[name="x2"]').val(),
'y2': $('input[name="y2"]').val(),
'pic': $('input[name="pic"]').val(),
'picwidth': $('input[name="picwidth"]').val()
}
$.post("JqueryUploadSimple/form",param,function(data){data=''+data;console.info('3333333333'+data);
ias = $('#photo').imgAreaSelect({ instance: true });
ias.cancelSelection();
if (data.length>1) {
$("#photo").attr("src",""+ data);
//准备下次搜索
$('input[name="picwidth"]').val("");
searchsimple();
} else {
alert("服务异常,请联系管理员");
}
});
}
$(function () {
ias=$('#photo').imgAreaSelect({ handles: true ,onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
$('input[name="pic"]').val($("#photo")[0].src);
$('input[name="picwidth"]').val($("#photo")[0].width);
}
});
});
</script>
</head>
<body>
<div>
<div class="all_body">
<div class="login_div" style="min-height:360px">
<div id="logg">
<table>
<tr>
<td id='left'>
<img src="./img/photo193.png" title='拖动裁剪' alt="拖动裁剪" id="photo"><p>
<input class='bbb1' style="height: 34px;width: 83px" id="fileupload" type="file" name="files[]" data-url="JqueryUploadSimple/uploadfile" single>
<label id='bbb2' class='button' οnclick="up_load()">上传图片</label><label style="margin-left: 6px" id="btnSaveImg" οnclick="search()" class='button'>搜 索</label></p></td>
<td id='right'>
<img src="img/log.png" id="loggimg"><div class="center_content"></div>
<hr style="border:1px dotted #ededed" />
<div class="center_content"></div>
<div class='bbb'><a href='http://www.1dst.com/index.php?do=goodslist&pd=448&i=595' target="_blank" class="button">英文字母</a>
<a href="http://www.1dst.com/index.php?do=goodslist&pd=515&i=516" target="_blank" class="button">淘花版</a>
<a href="http://www.1dst.com/index.php?do=goodslist&pd=521&i=522" target="_blank" class="button">卡通</a></div>
<img id='gifimg' src="1.gif"/>
</td>
</tr>
</table>
</div>
<div id="content" >
<table id="contenttable" style="text-align: center; margin: auto; width: 560px;padding-top:30px"><tbody>
<tr><td style="text-align: center;display:none;font-size:18px;background-color: #fff" class='pp' id="gif">
<p style="color:#000" id='gifp'>上传中...</p>
</td></tr>
<tr><td style="text-align: left;display:none" class='pp' >
<lable οnclick='to("1")'>风趣经典 </lable>
<lable οnclick='to("2")'>流行时尚 </lable>
<lable οnclick='to("3")'>网布满幅 </lable>
</td></tr>
</tbody></table>
<div id='idvi'></div>
<ul id="ulid">
</ul>
</div>
</div>
<div style="text-align: center;margin-top: 20px">
<label>Copyright 2013-2016. All rights reserved.</label>
</div>
</div>
</div>
<input type="hidden" name="x1" value="" />
<input type="hidden" name="y1" value="" />
<input type="hidden" name="x2" value="" />
<input type="hidden" name="y2" value="" />
<input type="hidden" name="pic" value="" />
<input type="hidden" name="picwidth" value="" />
<div style="display: none"></div>
<div style="text-align: center; margin-left: auto; margin-right: auto;" >
<div class="divcss5" οnclick="upload()">
<label style="display: none" id="lable" style="margin-left: auto; margin-right: auto;line-height: 100px">上传文件</label>
</div>
</div>
<script>
function up_load(){$("#fileupload").click();
}
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result, function (index, file) {
$("#photo").attr("src",file.url);
});
}
});
});
</script>
<script>var ua=(''+navigator.userAgent).toLowerCase();
if(ua.indexOf('msie')==-1){
$(".bbb1").remove();
}else{
$("#bbb2").remove();
}
</script>
</body>
</html>
-css-------------------jquery 1.9 ,最新jquery upload-
#login-wrapper {
background: url('../images/bg-login-top.png') top left repeat-x;
}#login-wrapper #login-top {
width: 100%;
padding: 140px 0 50px 0;
text-align: center;
}#login-wrapper #login-content {
text-align: left;
width: 300px;
margin: 0 auto;
}
#toplogin{height: 80px;
width: 100%;
}h1 {
font-family: Calibri, Helvetica, Arial, sans-serif;
font-size: 31px;
font-weight: bold;
color: white;
position: absolute;
top: -1000px;
}.side-bar {
float: left;
position: relative;
width: 194px;
height: 230px;
padding-top: 70px;
}ul, li {
list-style: none;
}.side-bar li a {
display: block;
}
a:link, a:visited {
color: white;
text-decoration: none;
}
#content{
margin-top: 60px;
margin-left: 320px;
margin-right: 280px;
text-align: center;
color: white;
margin:0 auto;
font-weight: normal;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
}
body, button, input, select, textarea {
font-size: 16px;
margin: 0px;
padding: 0px;
}
global.css:77
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, img {
padding: 0;
}
#content input{
margin-top: 5px;
}
body {
margin: 0;
text-align: center;
background: #efefef;
}
global.css:33
body {
background: white;
word-break: break-all;
}
global.css:4
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: 0;
padding: 0;
}
user agent stylesheet
body {
display: block;
margin: 8px;
}.all_body {
margin: 0px auto;
font-size: 14px;
line-height: 1.5em;
width: 980px;
height:190px;
position: relative;
z-index: 2;
}.login_div {
}
#logg{
color: white;
background-color:#fff;
text-align: center;
margin-top:10px;
font-size: 20px;
vertical-align:middle;
font-weight: bold;
height:260px;
}
#loggimg{vertical-align: middle;height:80px;}
.button{
margin-top:3px;
font-family: Verdana, Arial, sans-serif;
display: inline-block;
background: #00aff0;; url('bg-button-green.gif') top left repeat-x !important;
border: 1px solid #00aff0;; !important;
padding: 4px 7px 4px 7px !important;
color: white !important;
font-size: 15px !important;
cursor: pointer;
width: 90px;
}.bbb1{
margin-top:3px;
font-family: Verdana, Arial, sans-serif;
display: inline-block;
background: #00aff0;; url('bg-button-green.gif') top left repeat-x !important;
border: 1px solid #00aff0;; !important;
padding: 4px 7px 4px 7px !important;
color: white !important;
font-size: 15px !important;
cursor: pointer;
width: 90px;
}.text, div.password input, textarea, select {
width: 180px;
padding: 5px 4px;
font-size: 100%;
color: #434343;
background-color: #FDFDFD;
border: 1px solid #D5D5D5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 6px 5px 2px 9;
}.menu .menu_01 li {
height: 66px;
line-height: 66px;
font: normal 16px/40px "Microsoft YaHei";
float: left;
margin-left: 36px;
_margin-left: 30px;
}
.center_content{
clear:both;
}
.left_content{
}
.right_content{
width:625px;
float:left;
padding:30px 0 0 30px;
}
.sidebarmenu{
margin:0px 0;
padding:0;
width:195px;
}
.sidebarmenu a.menuitem{
background-color:##00aff0;;;
display: block;position: relative;height:31px;margin:0 0 5px 0;line-height:31px;padding:0px 0 0 10px;text-decoration: none;
}
.sidebarmenu a.menuitem_green{background:url(images/green_bt.gif) no-repeat center top;
display: block;position: relative;height:31px;margin:0 0 5px 0;line-height:31px;padding:0px 0 0 10px;text-decoration: none;
}
.sidebarmenu a.menuitem_red{background:url(images/red_bt.gif) no-repeat center top;
display: block;position: relative;height:31px;margin:0 0 5px 0;line-height:31px;padding:0px 0 0 10px;text-decoration: none;
}
.sidebarmenu a.menuitem:hover{ background-color:##00aff0;;}
.sidebarmenu a.menuitem_green:hover{background:url(images/green_bt_a.gif) no-repeat center top;}
.sidebarmenu a.menuitem_red:hover{background:url(images/red_bt_a.gif) no-repeat center top;}
.sidebarmenu a.menuitem:visited, .sidebarmenu .menuitem:active{
}
.sidebarmenu a.menuitem .statusicon{
position: absolute;
top:11px;
right:7px;
border: none;
}
.sidebarmenu div.submenu{
}
.sidebarmenu div.submenu ul{
list-style-type: none;
margin: 0;
padding: 0 0 5px 0;
}
.sidebarmenu div.submenu ul li{
border-bottom: 1px dotted white;
}
.sidebarmenu div.submenu ul li a{
display: block;
text-decoration: none;
padding:5px 0;
padding-left: 10px;
}
.sidebarmenu div.submenu ul li a:hover{
background: #00aff0;;;
;
}
input.search_input{
width:155px;
height:16px;
margin:5px 0 0 5px;
border:1px #bdebfd solid;
background:#92dbf8;
padding:4px 0 0 2px;
float:left;
color:#096184;
font-size:11px;
}
input.search_submit{
float:left;
background:none;
border:none;
margin:7px 0 0 8px;
}
.goodslist-item {
width: 202px;
padding: 10px;
background: #fff;
border: solid 1px #ccc;
float: left;
margin-left: 28px;
margin-top: 30px;
position: relative;
}#idvi{
display:none;
border-bottom: 2px solid #00aff0;
height: 4px;
}
#ulid li {width: 220px;
background: #fff;
border: solid 1px #ccc;
float: left;
margin-left: 18px;
margin-top: 30px;
position: relative;
display: inline;
float: left;
}#ulid li img{ height: 210px;
width: 220px;
overflow: hidden;
}
.line{
padding: 10px;
border-top: 1px solid #efefef;
}
#ulid{ width: 100%;
height: auto;
padding: 0 0 30px;
overflow: hidden;}
a:hover img {
opacity: 0.8;
filter: alpha(opacity=80);
}
.ulidp{color: #575757;
text-overflow: ellipsis;white-space: nowrap; font-size: 16px;
color: #575757;
margin-bottom: 6px;
overflow: hidden;
white-space: nowrap;}
.goodslist-item-money {
color: #ff7011;float: left;
}.ulidload {
color: #00aff0;float:right;
text-decoration: none;
}#left img{width:200px}#left p {line-height:50px;margin:0px auto}
#log{height:250px;line-height:250px}
#left p label{height:25px;line-height:25px;}
#right img{float:left}
#right{vertical-align: top;width:680px;}
#left{vertical-align: top;border:1px solid #EDEDED}
.bbb{display:none; float:left}.bbb a{margin-left: 12px}
#gifimg{display:none;height:150px}