jquery 读入图片时求出图片高度和宽度
时间: 2023-10-10 07:08:05 浏览: 38
你可以使用jQuery中的`width()`和`height()`方法来获取图片的宽度和高度。例如,假设你有一个ID为`myImage`的图片元素,你可以这样获取它的宽度和高度:
```javascript
var imgWidth = $('#myImage').width();
var imgHeight = $('#myImage').height();
```
请注意,这种方法只有在图片加载完成后才能正确获取宽度和高度。因此,最好在图片的`load`事件中执行上述代码来确保获取到正确的宽度和高度。例如:
```javascript
$('#myImage').on('load', function() {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
console.log('宽度:' + imgWidth + ',高度:' + imgHeight);
});
```
相关问题
jquery图片上传和删除
jQuery是一个JavaScript库,可以非常方便地处理图片上传和删除。以下是一个简单的示例代码:
HTML代码:
```
<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image">
<button type="submit" id="upload-btn">上传</button>
</form>
<div id="image-container"></div>
```
jQuery代码:
```
$(document).ready(function() {
// 上传图片
$('#upload-form').submit(function(event) {
event.preventDefault(); // 防止表单提交
var formData = new FormData($(this)[0]);
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: formData,
dataType: 'json',
processData: false,
contentType: false,
success: function(response) {
$('#image-container').append('<img src="' + response.image_url + '">');
}
});
});
// 删除图片
$(document).on('click', '.delete-btn', function() {
var imageId = $(this).data('image-id');
$.ajax({
url: 'delete.php',
type: 'post',
data: {id: imageId},
dataType: 'json',
success: function(response) {
if (response.success) {
$('#image-' + imageId).remove();
}
}
});
});
});
```
在上面的示例中,我们使用了jQuery的`$.ajax()`方法来进行异步上传和删除图片。当用户上传图片时,我们使用`FormData`对象来构建表单数据,并将其用作`data`选项。我们还使用`processData`和`contentType`选项来防止jQuery将表单数据转换为字符串类型。
在上传成功后,我们向`#image-container`元素添加一个新的图片标签,其`src`属性为所上传图片的URL。对于删除图片,我们使用`data`属性来传递要删除的图片ID,然后从DOM中删除该图片。
需要注意的是,这只是一个简单的示例,实际上还需要进行安全性检查和错误处理等操作。
jquery和java实现blob图片预览
要实现blob图片预览,可以使用jQuery和JavaScript FileReader API。以下是一个实现的示例代码:
```html
<!-- HTML代码 -->
<input type="file" id="input-file">
<div id="image-preview"></div>
```
```javascript
// JavaScript代码
$(document).ready(function() {
$('#input-file').on('change', function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
$('#image-preview').html('<img src="' + e.target.result + '">');
};
reader.readAsDataURL(file);
});
});
```
这段代码会在文件选择框选择图片后,使用FileReader API读取图片文件,并将其转换成base64编码的字符串,最后将其展示在页面上。
如果要使用Java实现blob图片预览,可以在后端将blob数据转换成base64编码的字符串,然后将该字符串传递到前端进行展示。具体实现方式可以参考Java的Blob类型和Base64编码相关的API。