通过JS实现上传图片的功能

刚刚在项目中遇到要上传产品图片的问题, 研究一下写了一个测试通过, 以下是我的源代码:

<!-- 实现图片上传 -->
<script type="text/javascript">
function getFilePic(){
form_add.picture1.src = form_add.pic.value;
var stxt;
stxt = form_add.pic.value.substring(form_add.pic.value.lastIndexOf(".")
+1,form_add.pic.length); //取出文件的扩展名

stxt = stxt.toUpperCase();
switch(stxt){
case "GIF":
alert("你上传的是GIF图片");
break;

case "JPG":
alert("你上传的是JPG图片");
break;

case "BMP":
alert("你上传的是BMP图片");
break;

default:
alert("你输入的图片格式必须为jpg,bmp,gif!");
break;

}
}
</script>

调用代码如下:

<form id=""form_add>

<td>选择图片:<input type="file" name="pic"></td>

<td><input type="button" value="上传" οnclick="getFilePic()"/></td>

补充一下: 要实现预览的效果还需添加如下代码:

图片预览
<td ><img id="picture1" width="260" height="140"/></td>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过监听粘贴事件,获取剪贴板中的图片,并将其上传到服务器。 以下是一个简单的实现示例: HTML: ```html <div contenteditable="true" id="editor"></div> ``` JavaScript: ```javascript const editor = document.getElementById('editor'); editor.addEventListener('paste', function(e) { const items = (e.clipboardData || e.originalEvent.clipboardData).items; for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { const file = items[i].getAsFile(); uploadImage(file); } } }); function uploadImage(file) { const formData = new FormData(); formData.append('image', file); // 发送 ajax 请求上传图片 const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload-image'); xhr.send(formData); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const imageUrl = xhr.responseText; insertImage(imageUrl); } } } function insertImage(imageUrl) { const img = document.createElement('img'); img.src = imageUrl; editor.appendChild(img); } ``` 在上面的代码中,我们监听了 `paste` 事件,获取剪贴板中的所有项目。如果项目的类型是图片,就将其转换为 `File` 对象,并调用 `uploadImage` 函数上传图片。 在 `uploadImage` 函数中,我们创建了一个 `FormData` 对象,将图片文件添加到其中,并使用 AJAX 发送请求将数据上传到服务器。 在上传成功后,我们调用 `insertImage` 函数将图片插入到编辑器中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值