[英]Control image upload size in textarea of HTML Form
我正在使用下面的WIZWIG編輯器“ http://js.nicedit.com/nicEdit-latest.js ”發布到下面的HTML表單中。 我想控制上傳圖像的大小。 圖片大小應為200px高,300px寬。 我嘗試了CSS,HTML和JavaScript都無濟於事。 無法解決這個問題...
<style>
.nicEdit-main{
background-color: white;
}
</style>
<script type="text/javascript" src="http://js.nicedit.com/nicEdit- latest.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas({buttonList : ['bold','italic','underline','strikeThrough','html','forecolor','link','upload','unlink','removeformat']}) });
</script>
<form name="comments" action="<?php echo $_SERVER['PHP_SELF']; ?>"method="post" onsubmit="return checkForm();">
<?php if ($isGuest) { ?>
Comment:<br><br>
<div style="background: #fff;">
<textarea style="width: 100%;" name="comment" cols="111px" rows="4">disabled for guest account</textarea>
</div>
<input type="submit" name="action" disabled value="Add Comment" />
<?php } else { ?>
Comment:<br><br>
<div style="background: #fff;">
<textarea style="width: 100%;" name="comment" cols="111px" rows="4"></textarea>
</div>
<input type="submit" name="action" value="Add Comment" />
<?php //header("Location: test.php");
} ?>
</form>
盡管幾年前這是不可能的(您必須將文件發送到服務器端才能處理文件信息),但是現在可以使用FileReader()對象和純JS實現。
您使用.files[0]
來獲取文件,然后在DOM上創建一個臨時img對象(以便執行此過程),然后(在FileReader()
的幫助下FileReader()
將文件分配給該DOM對象。您只需比較文件的寬度或高度即可。 這是一個示例如何執行此操作:
imgfile.onchange = function(e) { var oFile = document.getElementById("imgfile").files[0]; //Get the selected file by the user var img = document.getElementById("imgdom"); //get the reserve image element on the dom to be able do all our processing with this object type document.getElementById("imgdom").style.display = "none";//This is optional if you want to show or not the image to the user var reader = new FileReader(); //This is the magic object that allows you to process a file on the client side reader.onload = function (e) { console.log(e.total); // file size img.src = e.target.result; // putting file in dom without server upload. alert(img.width); //Do what ever condition you want here //if img.width > 200 do this, else do that }; reader.readAsDataURL(oFile ); //return false; };
<form method="post" enctype="multipart/form-data" onsubmit="return false;"> <input type="file" name="imgfile" id="imgfile"> </form> <div> <img id="imgdom" src="" />
以下CSS代碼已解決了此問題:
.nicEdit-main img {
width: 350px;
}
img[src*="http://somedomain.com"] {
width: 350px;
}
感謝所有發表評論的人...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.