如何用jquery.imgareaselect保存剪切后的預覽圖像

你的思路應該錯了，我給你梳理下吧：

創(chuàng)新互聯-云計算及IDC服務提供商，涵蓋公有云、IDC機房租用、溫江服務器租用、等保安全、私有云建設等企業(yè)級互聯網基礎服務，聯系電話：13518219792

用jquery.imgareaselect實際上主要是利用它幫你獲得預覽圖和剪裁數據。然后將數據發(fā)送后臺根據這些數據就可以從原始圖片中重新畫出你選擇部分的圖片信息了。

1，你異步上傳后將圖片訪問路徑設置到剪裁區(qū)img.src;

2，利用imgareaselect的回調函數拿到圖片引用img和選擇對象selection，從img拿到引用圖片width\height，selection拿到左上角的坐標x1\y1，右下角的坐標x2\y2，選擇區(qū)寬高width\height。

3，將2中拿到的數據發(fā)送到后臺，后臺根據這些數據和原始圖片信息畫出選擇區(qū)的圖像。

用js、jquery如何實現上傳圖片的預覽

$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });

//獲得表單元素

HttpPostedFile oFile = context.Request.Files[0];

//設置上傳路徑

string strUploadPath = "temp/";

//獲取文件名稱

string fileName = context.Request.Files[0].FileName;

補充：JQuery是繼prototype之后又一個優(yōu)秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，并且方便地為網站提供AJAX交互。jQuery還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html里面插入一堆js來調用命令了，只需要定義id即可。

怎樣用js或者jq實現點擊這個圖片就可以選擇上傳還有預覽圖片啊

!doctype html

html

head

meta charset="UTF-8"

meta name="Generator" content="EditPlus?"

meta name="Author" content=""

meta name="Keywords" content=""

meta name="Description" content=""

titleDocument/title

script src="jquery-3.1.1.min.js"/script

/head

body

h3請選擇圖片文件：JPG/GIF/h3

form name="form0" id="form0"

input type="file" name="file0" id="file0" multiple="multiple" /

brbrimg src="" id="img0" width="120"

/form

/body

script

$("#file0").change(function(){

var objUrl = getObjectURL(this.files[0]) ;

console.log("objUrl = "+objUrl) ;

if (objUrl)

{

$("#img0").attr("src", objUrl);

$("#img0").removeClass("hide");

}

}) ;

//建立一個可存取到該file的url

function getObjectURL(file)

{

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 ;

}

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

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

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

alert(value);

})

/script

/html

jquery 多圖片預覽

給你重新寫了一個，直接拷貝到記事本另存為html就可以調試(Jquery是在線引用的)。

以下代碼在IE8和FF下測試通過。

另：程序如果有什么問題可以HI我。

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

html

head

title New Document /title

script src="" type="text/javascript"/script

script type="text/javascript"

//全局變量

var FileCount=0;//上傳文件總數

//添加上傳文件按鈕

function addFile(obj)

{

var filePath=$(obj).prev().val();

var FireFoxFileName="";

//FireFox文件的路徑需要特殊處理

if(window.navigator.userAgent.indexOf("Firefox")!=-1)

{

FireFoxFileName=filePath;

filePath=$(obj).prev()[0].files.item(0).getAsDataURL();

}

if(!checkFile(filePath,FireFoxFileName))

{

$(obj).prev().val("");

return;

}

if(filePath.length==0)

{

alert("請選擇上傳文件");

return false;

}

FileCount++;

//添加上傳按鈕

var html='span';

html+='input id="f'+FileCount+'" name="'+FileCount+'" type="file"/?';

html+='input type="button" value="添加" onclick="addFile(this)"/';

html+='/span';

$("#fil").append(html);

//添加圖片預覽

html='li';

html+='img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" style="cursor:pointer;" alt="暫無預覽" /';

html+='br/';

html+='a href="#" name="img'+(FileCount-1)+'" onclick="DelImg(this)"刪除/a';

html+='/li';

$("#ImgList").append(html);

}

//刪除上傳文件（file以及img）

function DelImg(obj)

{

var ID=$(obj).attr("name");

ID=ID.substr(3,ID.length-3);

$("#f"+ID).parent().remove();

$(obj).parent().remove();

return false;

}

//檢查上傳文件是否重復,以及擴展名是否符合要求

function checkFile(fileName,FireFoxFileName)

{

var flag=true;

$("#ImgList").find(":img").each(function(){

if(fileName==$(this).attr("src"))

{

flag=false;

if(FireFoxFileName!='')

{

alert('上傳文件中已經存在\''+FireFoxFileName+'\'!');

}

else

{

alert('上傳文件中已經存在\''+fileName+'\'!');

}

return;

}

});

//文件類型判斷

var str="jpg|jpeg|bmp|gif";

var fileExtName=fileName.substring(fileName.indexOf(".")+1);//獲取上傳文件擴展名

if(FireFoxFileName!='')//fireFox單獨處理

{

fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1);

}

//alert(fileExtName);

if(str.indexOf(fileExtName.toLowerCase())==-1)

{

alert("只允許上傳格式為jpg，jpeg，bmp，gif的文件。");

flag=false;

}

return flag;

}

/script

style type="text/css"

.fil

{

width:300px;

}

.fieldset_img

{

border:1px solid blue;

width:550px;

height:180px;

text-align:left;

}

.fieldset_img img

{

border:1px solid #ccc;

padding:2px;

margin-left:5px;

}

#ImgList li

{

text-align:center;

list-style:none;

display:block;

float:left;

margin-left:5px;

}

/style

/head

body

p上傳預覽圖片:br

div id="fil" class="fil"

span

input id="f0" name="f0" type="file"/

input type="button" value="添加" onclick="addFile(this)"/

/span

/div

/p

div id="ok"

fieldset class="fieldset_img"

legend圖片展示/legend

ul id="ImgList"

!--li

img id="img1" width="100" height="100" style="cursor:pointer;"

br/

a href="#" name="img1" onclick="DelImg(this)"刪除/a

/li--

/ul

/fieldset

/div

/body

/html

jQuery File Upload 圖片預覽代碼如何寫

jQuery File Upload是上傳文件的一個插件，不一定是圖片，所以里面沒做預覽的支持。但是可以直接用jquery簡單實現出來，代碼如下：

/*

先在js里擴展一個uploadPreview方法

使用方法:?

div

img?id="ImgPr"?width="120"?height="120"?//div

input?type="file"?id="up"?/

把需要進行預覽的IMG標簽外?套一個DIV?然后給上傳控件ID給予uploadPreview事件

$("#up").uploadPreview({?Img:?"ImgPr",?Width:?120,?Height:?120,?ImgType:?["gif",?"jpeg",?"jpg",?"bmp",?"png"],?Callback:?function?()?{?}});

*/

jQuery.fn.extend({

uploadPreview:?function?(opts)?{

var?_self?=?this,

_this?=?$(this);

opts?=?jQuery.extend({

Img:?"ImgPr",

Width:?100,

Height:?100,

ImgType:?["gif",?"jpeg",?"jpg",?"bmp",?"png"],

Callback:?function?()?{}

},?opts?||?{});

_self.getObjectURL?=?function?(file)?{

var?url?=?null;

if?(window.createObjectURL?!=?undefined)?{

url?=?window.createObjectURL(file)

}?else?if?(window.URL?!=?undefined)?{

url?=?window.URL.createObjectURL(file)

}?else?if?(window.webkitURL?!=?undefined)?{

url?=?window.webkitURL.createObjectURL(file)

}

return?url

};

_this.change(function?()?{

if?(this.value)?{

if?(!RegExp("\.("?+?opts.ImgType.join("|")?+?")$",?"i").test(this.value.toLowerCase()))?{

alert("選擇文件錯誤,圖片類型必須是"?+?opts.ImgType.join("，")?+?"中的一種");

this.value?=?"";

return?false

}

if?($.browser.msie)?{

try?{

$("#"?+?opts.Img).attr('src',?_self.getObjectURL(this.files[0]))

}?catch?(e)?{

var?src?=?"";

var?obj?=?$("#"?+?opts.Img);

var?div?=?obj.parent("div")[0];

_self.select();

if?(top?!=?self)?{

window.parent.document.body.focus()

}?else?{

_self.blur()

}

src?=?document.selection.createRange().text;

document.selection.empty();

obj.hide();

obj.parent("div").css({

'filter':?'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',

'width':?opts.Width?+?'px',

'height':?opts.Height?+?'px'

});

div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src?=?src

}

}?else?{

$("#"?+?opts.Img).attr('src',?_self.getObjectURL(this.files[0]))

}

opts.Callback()

}

})

}

});

然后是HTML頁面進行調用：

!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"

html?xmlns="

head

title圖片上傳預覽演示/title

script?src="jquery.min.js"?type="text/javascript"/script

script?src="16/uploadPreview.js"?type="text/javascript"/script

script

$(function?()?{

$("#up").uploadPreview({?Img:?"ImgPr",?Width:?120,?Height:?120?});

});

/script

/head

body

div?style="width:500px;margin:0px?auto;"h2圖片上傳預覽演示/h2

divimg?id="ImgPr"?width="120"?height="120"?//div

input?type="file"?id="up"?/

/div

/body

/html

文章題目：jquery預覽圖片,jquery實現圖片顯示
本文路徑：http://chinadenli.net/article41/dsgoced.html

成都網站建設公司_創(chuàng)新互聯，為您提供App開發(fā)、自適應網站、建站公司、網站收錄、云服務器、網站營銷

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯