ホーム エスクプローラ ヘルプ
登録 サインイン
bulomakaka
/
ekexiu.com.portal
Watch 7
Star 0
Fork 0
コード 課題 0 プルリクエスト 0 コミット 208 リリース 0 Wiki
ソースを参照

图像修改及头像上传兼容ie ok

luyanan 8 年 前
親
17ec698120
コミット
62578e7049
共有3 個のファイルを変更した、120 個の追加 と 14 個の削除を含む
分割表示 差分情報を表示
  1. 1 0
      src/main/webapp/js/popup.js
  2. 18 5
      src/main/webapp/js/sciresource.js
  3. 101 9
      src/main/webapp/photo-set.html

+ 1 - 0
src/main/webapp/js/popup.js
ファイルの表示 

@ -211,6 +211,7 @@ function ResourceInfo() {
211 211
212 212 
		    // $list为容器jQuery实例
213 213 
		    var $list = $('#fileList');
214 
		    $list.empty("");
214 215 
		    $list.append( $li );
215 216
216 217 
		    // 创建缩略图

+ 18 - 5
src/main/webapp/js/sciresource.js
ファイルの表示 

@ -137,11 +137,24 @@ $(function(){
137 137 
								 industryShow(info.data.industry,"industryList","deleteIndustry");
138 138 
								$("#descp").val(info.data.descp);
139 139 
								$("#professor").text(name);
140 
								$(".resouImage").attr("src","/images/resource/"+resourceID+".jpg");
141 
								$(".resouImage").load(function(){})
142 
									.error(function(){
143 
										$(this).attr("src","/images/default-resource.jpg");
144 
									});
140 
								if(info.data.images.length) {
141 
															 var $liMages = $(
142 
																	 '<div id="WU_FILE" class="file-item thumbnail">'+
143 
															 			'<img src="/images/resource/'+resourceID+'.jpg">'+
144 
															 			'</div>'
145 
															            )
146 
								}
147 
								else
148 
								{
149 
									var $liMages = $(
150 
											 '<div id="WU_FILE" class="file-item thumbnail">'+
151 
									 			'<img src="/images/default-resource.jpg">'+
152 
									 			'</div>'
153 
									            )
154 
								}
155
156 
								 $("#fileList").append($liMages);
157
145 158 
								}
146 159 
								else
147 160 
								{

+ 101 - 9
src/main/webapp/photo-set.html
ファイルの表示 

@ -11,8 +11,7 @@
11 11 
<link href="css/basic.css" rel="stylesheet" type="text/css" />
12 12 
<link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
13 13 
<link type="text/css" href="css/login.css" rel="stylesheet">
14
15
14 
<link rel="stylesheet" type="text/css" href="css/webuploader/webuploader.css">
16 15 
</head>
17 16 
<body>
18 17 


@ -22,10 +21,14 @@
22 21 
             <div class="photo-set">
23 22 
                 <div class="photo-upload">
24 23 
                     <!--点击上传按钮-->
25 
                     <div class="load">
26 
                          <div class="upbtn" style="Margin:auto" ><span class="plus">+</span>本地上传<input type="file" class="filebtn"  name="file" id="uploadInput" ></div>
27 
                         <p>只支持JPG、PNG，大小不超过5M</p>
28
24 
                   <div class="load">
25 
                       <!--<div class="upbtn" style="Margin:auto" ><span class="plus">+</span>本地上传<input type="file" class="filebtn"  name="file" id="uploadInput" ></div>
26 
                         <p>只支持JPG、PNG，大小不超过5M</p>-->
27 
                         <div id="uploader">
28 
								<div id="fileList" class="uploader-list"></div>
29 
								<div id="filePicker">选择图片</div>
30 
						 </div>
31 
						<span class="resouimgmsg">尺寸240*240，大小在5M以内，<br/>JPG、PNG格式</span>
29 32 
                     </div>
30 33 
                     <!---->
31 34 
                     <!--选择图片尺寸-->

@ -93,10 +96,11 @@
93 96 
<div id="footer"></div>
94 97
95 98 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
99 
<script type="text/javascript" src="js/webuploader/webuploader.js"></script>
96 100 
<script type="text/javascript" src="js/jquery.HeadP.js"> </script>
97 101 
<script type="text/javascript" src="js/jquery.Jcrop.js"> </script>
98 102 
<script type="text/javascript" src="js/basic.js"> </script>
99 
<script type="text/javascript" src="/js/ajaxfileupload.js"></script>
103
100 104 
<script type="text/javascript" src="js/jquery.similar.msgbox.js"></script>
101 105 
<script type="text/javascript"src="js/jquery.cookie.js"></script>
102 106 
<script type="text/javascript">

@ -116,7 +120,94 @@ $(function (){
116 120 
		$("#smallImage").attr("src","/images/head/"+id+"_s.jpg");
117 121 
		$("#middleImage").attr("src","/images/head/"+id+"_m.jpg");
118 122 
		$("#largeImage").attr("src","/images/head/"+id+"_l.jpg");
119 
		$('#uploadInput').live('change',function(){
123 
		// 初始化Web Uploader
124 
		var uploader = WebUploader.create({
125 
			// 选完文件后，是否自动上传。
126 
		    auto: true,
127 
		    // 添加的文件数量
128 
		    fileNumLimit: 1,
129 
		    // swf文件路径
130 
		    swf: '../js/webuploader/Uploader.swf',
131 
		    // 文件接收服务端。
132 
		    server: '../ajax/cachedFileUpload',
133 
		    // 选择文件的按钮。可选。
134 
		    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
135
136 
		    pick : {
137 
		    	id : "#filePicker",
138 
		    	multiple: false
139 
		    	},
140 
		    // 只允许选择图片文件。
141 
		    accept: {
142 
		        title: 'Images',
143 
		        extensions: 'gif,jpg,jpeg,bmp,png',
144 
		        mimeTypes: 'image/*'
145 
		    }
146
147 
		});
148
149 
		// 当有文件添加进来的时候
150 
		uploader.on( 'fileQueued', function( file ) {
151 
		    var $li = $(
152 
		            '<div id="' + file.id + '" class="file-item thumbnail">' +
153 
		                '<img>' +
154 
		            '</div>'
155 
		            )
156
157 
		        $img = $li.find('img');
158
159 
		    // $list为容器jQuery实例
160 
		    var $list = $('#fileList');
161 
		    $list.empty("");
162 
		  //  $list.append( $li );
163
164 
		    // 创建缩略图
165 
		    // 如果为非图片文件，可以不用调用此方法。
166 
		    // thumbnailWidth x thumbnailHeight 为 100 x 100
167 
		    uploader.makeThumb( file, function( error, src ) {
168 
		        if ( error ) {
169 
		            $img.replaceWith('<span>不能预览</span>');
170 
		            return;
171 
		        }
172 
		        $img.attr( 'src', src );
173 
		    }, 240, 240 );
174 
		});
175
176 
    	// 文件上传过程中创建进度条实时显示。
177 
		uploader.on( 'uploadProgress', function( file, percentage ) {
178 
		    var $li = $( '#'+file.id ),
179 
		        $percent = $li.find('.progress span');
180
181 
		    // 避免重复创建
182 
		    if ( !$percent.length ) {
183 
		        $percent = $('<p class="progress"><span></span></p>')
184 
		                .appendTo( $li )
185 
		                .find('span');
186 
		    }
187
188 
		   $percent.css( 'width', percentage * 100 + '%' );
189 
		});
190 
		// 文件上传成功，给item添加成功class, 用样式标记上传成功。
191 
		cacheImageKey=null;
192 
		uploader.on( 'uploadSuccess', function(file,data) {
193
194 
		$("#jcropdiv").show();
195 
		$(".load").hide();
196 
			cacheImageKey =data.data[0].cacheKey;
197 
			console.log(cacheImageKey);
198 
			$("#headImage").attr("src","/images/tmp/"+cacheImageKey);
199 
			$("#smallImage").attr("src","/images/tmp/"+cacheImageKey);
200 
		$("#middleImage").attr("src","/images/tmp/"+cacheImageKey);
201 
		$("#largeImage").attr("src","/images/tmp/"+cacheImageKey);
202 
		  $('#largeImage').attr("style","");
203 
  		 $('#middleImage').attr("style","");
204 
  		 $('#smallImage').attr("style","");
205 
			console.log(cacheImageKey);
206 
		   // $( '#'+file.id ).addClass('upload-state-done');
207 
			$("#filePicker").hide();
208 
		});
209
210 
		/*$('#uploadInput').live('change',function(){
120 211 
			$("#jcropdiv").show();
121 212 
			$(".load").hide();
122 213 
			$.ajaxFileUpload({

@ -141,7 +232,7 @@ $(function (){
141 232 
					$.MsgBox.Alert("message","upload error");
142 233 
				}
143 234 
			});
144 
		});
235 
		});*/
145 236
146 237 
	}
147 238 
    

@ -175,6 +266,7 @@ $(function (){
175 266 
	$(".close").on("click",function(){
176 267 
		$(".load").show();
177 268 
		$("#jcropdiv").hide();
269 
		$("#filePicker").show();
178 270 
		$("#headImage").attr("src","");
179 271 
		$("#smallImage").attr("src","");
180 272 
		$("#middleImage").attr("src","");