Question

我使用以下WIZWIG编辑器＆＃34; http://js.nicedit.com/nicEdit-latest.js＆＃34;发布到下面的HTML表单中。我想控制上传图像的大小。图像大小应该像200px高度，300px宽度。我已经尝试过CSS，HTML＆amp; 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>

Answer 1

虽然几年前这是不可能的（你必须将文件发送到服务器端以便能够处理文件信息），现在可以使用FileReader（）对象和纯JS。

使用.files[0]获取文件，然后在DOM上创建临时img对象（以便能够执行此过程），然后将文件分配给该DOM对象（在{{1}的帮助下然后你只需比较文件的宽度或高度。这是一个如何做到的例子：

＆＃13;

FileReader()

＆＃13;

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;
	};

＆＃13;

Answer 2

此问题已通过以下CSS代码解决：

.nicEdit-main img {
width: 350px; 
}

img[src*="http://somedomain.com"] {
width: 350px;
}

感谢所有评论的人......

控制HTML表单的textarea中的图像上传大小

2 个答案: