jquery upload上传(含ie 9以下上传不成功) 含拖动截图

麻蛋,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}



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值