jquery圖片上傳截取

1. jquery怎麼打開本地圖片預覽，點擊確定後上傳

1, tapmodo / Jcrop
Jcrop是人氣最高的圖片裁剪jQuery插件，stars數量2k+，功能非常豐富，文檔齊全，首選。Github.com官網也使用了這個插件。有一個小細節是，邊框線的螞蟻線是動畫的，真的很用心。

2, fengyuanchen / cropper
Cropper也是一款圖片裁剪jQuery插件，stars數量1k+，是杭州的前端工程師Fengyuan Chen所寫的，功能也相當豐富，裁剪時還可以對原圖進行旋轉。

3, imgAreaSelect 也是比較經典的圖片裁剪jQuery插件，我很久以前就在自己的項目中使用過，stars數量500+。

http://blog.csdn.net/cuixiping/article/details/45966177

2. jquery如何將頁面生成的圖片上傳到伺服器

File Upload組件啊，是同步還是非同步呢
html部分：
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入：
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分：
<div id="demo"> <div id="as" ></div></div>
JS部分：
<script type="text/javascript">
/** 伺服器地址,成功返回,失敗返回參數格式依照jquery.ajax習慣;* 其他參數同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ); },
error:function( err ) {
console.info( err );
},
buttonText : '選擇文件', chunked:true, // 分片大小
chunkSize:512 * 1024, //最大上傳的文件數量, 總文件大小,單個文件大小(單位位元組);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}});
</script>

3. jquery如何獲取input(file)控制項上傳的圖片名稱，即"11111.jpg"

$('input').on('change',function(){

var value = $(this).val();

value = value.split("\")[2];

})

value 就是圖片名稱。因為瀏覽器安全機制 獲取到的value都是C:fakepath 加上圖片名，所以可以用這個方式獲取

4. jquery如何完成上傳圖片的剪切

用canvas畫出圖片剪裁區域，然後導出

5. jquery多圖片上傳(form表單序列化提交)為啥後台只獲取一個圖片文件

首先，文本類的可以放在request中通過request.getAttribute(name)獲取。圖片你在前端放地址，後端也是像前面通過request.getAttribute(name)獲取後存入資料庫。這是jsp+servlet的做法。jsp有九大內置對象用於傳遞數據。而你如果用spring+springmvc的話是通過參數綁定來傳遞數據的。詳細的你可以了解框架文檔。建議你選擇一種框架可以便捷開發。jsp+servlet是比較原始的處理方式。

6. jquery photoclip 怎麼提交

jquery截取圖片後，ajax非同步提交該圖片

如何用form非同步提交已經截取的圖片呢？因為後台(springMVC)用到組件上傳圖片，需要圖片類型list。

解決思路：截取圖片是base64，將base64存入form的input，type=file中，提交form即可。

[html] view plain
<script type="text/javascript" src="assets/wap/kuaiqin/js/jquery-1.12.2.min.js" ></script>
<script src="assets/wap/kuaiqin/js/iscroll-zoom.js"></script>
<script src="assets/wap/kuaiqin/js/hammer.js"></script>
<script src="assets/wap/kuaiqin/js/jquery.photoClip.js"></script>
<script type="text/javascript" src="assets/wap/kuaiqin/js/xx.js"></script>

[html] view plain
<img id="xiaotu" src="assets/wap/kuaiqin/img/share_feng.jpg" style="width:65px;height:65px;position:absolute;left:18px;top:-25px;">
[html] view plain
<input type="file" id="face_upload" name="temp_img" style="display:none">
<form method="post" encType="multipart/form-data"></form>

[html] view plain
<!-- 圖片處理 -->
<div id="img_screen" style="position:absolute;top:0;width:100%;background:#000;overflow:hidden;display:none;"></div>
<div id="img_box" style="position:absolute;top:0;width:100%;display:none;margin-top:20%;">
<div id="clipArea" style="margin:20px;height: 300px;"></div>
</div>
<button id="clipBtn" style="position:absolute;top:0;right:0;border:0;color:#fff;background:#000;display:none;">確定</button>
<!-- end -->

[html] view plain
$("#xiaotu").click(function(){//點擊圖片彈出文件夾
$("#face_upload").click();
});

[html] view plain
$("#face_upload,#smrz_upload").change(function(){//選擇圖片之後，將圖片放到截取框中截取
var objUrl=getObjectURL(this.files[0]);
if(objUrl){
$(window).scrollTop(0);
$("#img_screen").show();
$("#img_box").show();
$("#clipBtn").show();
}
})

[html] view plain
function getObjectURL(file){//獲取選擇圖片的base64
var url=null
if(window.createObjectURL!=undefined){ // basic
url=window.createObjectURL(file)
}else if(window.URL!=undefined){ // mozilla(firefox)
url=window.URL.createObjectURL(file)
} else if(window.webkitURL!=undefined){ // webkit or chrome
url=window.webkitURL.createObjectURL(file)
}
return url
}

[html] view plain
var base64=null;
$("#img_screen").css("height",$(window).height());
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#face_upload",
ok: "#clipBtn",
clipFinish: function(dataURL) {
$('#xiaotu').attr("src", dataURL);
$('#datu').attr("src", dataURL);
base64=dataURL;
}
});
$("#clipBtn").click(function(){
convertToFile(base64);
});

[html] view plain
function convertToFile(base64Codes){//將base64轉化blob，並放到form中
var form=document.forms[0];
var formData = new FormData(form);
var img_name=$("#face_upload").val();
formData.append("img",convertBase64UrlToBlob(base64Codes),img_name);//img是input的name屬性，與後台的對應即可
$.ajax({//提交表單，非同步上傳圖片
url : "api/public/uploadImg",
type : "POST",
data : formData,
dataType:"json",
processData : false, // 告訴jQuery不要去處理發送的數據
contentType : false, // 告訴jQuery不要去設置Content-Type請求頭
success:function(data){
imgurl=data.imgs[0];
subuserinfo_face(imgurl);
}
});
}
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的頭，並轉換為byte
//處理異常,將ascii碼小於0的轉換為大於0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}

7. jsp頁面實現圖片預覽，截取和上傳

比較常用，而且簡單易用的jquery-uploadify插件，支持帶進度的多線程上傳

用到的是flash的跨域上傳模型，這里不用深究

基本文件大致包括

jquery-x.x.x.js

jquery.uploadify.x.js

uploadify.swf

uploadify.css

使用方式：

	$(function(){
		$("#fileId").uploadify({
			width:42,
			height:32,
			swf:'js/uploadify.swf',
			uploader:'upload.do;jsessionid=<%=session.getId()%>',
			buttonImage:'image/movetophone_white.png',
			fileSizeLimit:2048,
			fileObjName:"imgFile",
			method:'post',
			removeCompleted:true,
			fileTypeExts:"*.gif;*.jpg;*.png;*.jpeg;*.bmp",
			onSelectError:function(file,errorCode,errorMsg){
				alert("文件過大");
			},
			onUploadStart:function(file){
				
			},
			onUploadSuccess:function(file,data,response){
				alert("上傳完成");
			},
			onUploadError:function(file,errorCode,errorMsg){
				alert(errorMsg);
			}
		});
	});
	<inputtype="file"id="fileId"/>

另，工程中需要引入commons-fileupload的包。

8. 急求 jquery 文件上傳，帶圖片裁剪功能

給你一個jquery 的插件 ，Jcrop
http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop

9. jquery ajax實現jsp頁面圖片上傳與後台獲取。

你在上傳圖片的地方寫個方法upload(url)，在js中用ajax來傳值（url）到後台，後台獲取到圖片上傳的url就行了啊