當前位置:首頁 » 文件傳輸 » js上傳圖片壓縮大小
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

js上傳圖片壓縮大小

發布時間: 2022-03-30 09:54:34

㈠ javascript或jQuery 如何直接設置上傳圖片的大小,或者獲取圖片的大小,提交表單時進行限制

javascript無法限制,因為javascript沒有讀文件的許可權!當然使用ajax上傳也不行。因為ajax就是javascript的。
你可以在上傳後在後台比對!
如果你非要實現ajax效果的話可以使用偽ajax(隱藏一個iframe)上傳。

㈡ 怎麼用JavaScript在線壓縮圖片

主要用了兩個html5的 API,一個file,一個canvas,壓縮主要使用cnavas做的,file是讀取文件,之後把壓縮好的照片放入內存,最後內存轉入表單下img.src,隨著表單提交。
照片是自己用單反拍的,5M多,壓縮下面3張分別是600多kb,400多kb,300kb的最後那張失真度很大了,壓縮效率蠻高的。

<!DOCTYPE html>
<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/JIC.js"></script> <style> #test{ display: none; } </style></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> function handleFileSelect (evt) { // var filebtn = document.getElementById(id); // console.log(filebtn); // var files = filebtn.target.files; // console.log(filebtn.target); // console.log(files); var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. // console.log(evt.target.files[0]); // console.log(e.target); console.log(e.target.result); var i = document.getElementById("test"); i.src = event.target.result; console.log($(i).width()); console.log($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); console.log($(i).width()); console.log($(i).height()); var quality = 50; i.src = jic.compress(i,quality).src; console.log(i.src); i.style.display = "block"; }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>

var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ compress: function(source_img_obj, quality, output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); //naturalWidth真實圖片的寬度 cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; }, function ****(***)

㈢ 怎樣在客戶端 利用js 壓縮圖片 大小,然後上傳至伺服器比如2M壓縮成幾十KB

無法實現,js沒有許可權去修改本地文件的,只能是將大圖上傳到伺服器後再壓縮

㈣ javascript上傳圖片限制大小為100KB

<script language="javascript">
function check(form1)
{
var img=document.createElement("img");

if(form1.images.value=="")
{
alert("圖片上傳不能為空,請選擇上傳的圖片!")
form1.images.focus();
return false;
}
if (img.fileSize>102400)
{
alert("上傳的圖片不能大於100KB");
return false;
}
else
{
return true;
}
}
</script>

㈤ 上傳圖片大小超過200K 要怎麼壓縮啊

1、可以利用美圖秀秀軟體進行壓縮。雙擊運行美圖秀秀軟體,點擊右上角的「打開」按鈕。

㈥ 怎麼在js 裡面限制上傳圖片的大小不能超過 1M

這樣設置的:

1、先用form標簽創建一個上傳的表單。

<formid="form1"name="form1"method="post"action=""enctype="multipart/form-data">
<p><inputtype="hidden"name="MAX_FILE_SIZE"value="100000"/></p>
<p><inputname="userfile"id="userfile"type="file"onchange="check()"/></p>
</form>


2、用Javascript設置格式和大小。

<scriptlanguage="JavaScript"type="text/javascript">functioncheck(){varaa=document.getElementById("userfile").value.toLowerCase().split('.');//以「.」分隔上傳文件字元串//varaa=document.form1.userfile.value.toLowerCase().split('.');//以「.」分隔上傳文件字元串if(document.form1.userfile.value==""){alert('圖片不能為空!');returnfalse;}else{if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp'
||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判斷圖片格式{varimagSize=document.getElementById("userfile").files[0].size;alert("圖片大小:"+imagSize+"B")if(imagSize<1024*1024*1)alert("圖片大小在1M以內,為:"+imagSize/(1024*1024)+"M");returntrue;}else{alert('請選擇格式為*.jpg、*.gif、*.bmp、*.png、*.jpeg的圖片');//returnfalse;}}}</script>

圖片超過1M則不能上傳 如圖:

㈦ 求js 修改圖片本生大小,並上傳圖片。

javascript是運行在客戶端的腳本,沒法在本地處理你的圖片壓縮。

只能藉助伺服器端。

㈧ js控制上傳圖片大小

將圖片放到world文檔裡面,雙擊圖片,出現「設置圖片格式」的文檔框,點擊下面的「壓縮」,在更改解析度裡面,選擇Web/屏幕(W)解析度96dpi 確定即可,筆者親自試用過。

㈨ jquery怎麼壓縮圖片質量與大小

jquery不能更改圖片的體積。你可以試試服務端語言,如java php nodejs之類的