前端上传图片预览,不上传到后端

需求:上传图片只在前端展示,并不在点击上传后上传到服务器

<input @change=“handleChange” type=“file” multiple accept=‘image/png, image/jpeg, image/jpg, image/svg, image/gif’ id=‘inputFile’>

html结构如下:

点击上传图片选中图片后打开执行的js函数如下:

触发 change 事件接受到的事件对象 e.target.files 是上传的图片列表,得到的是一个伪对象/伪数组;这里使用 es6… 方法结构赋值为真数组。

new FileReader,使用 FileReader 的 readAsDataURL 方法会把每个对象转换为 base64 格式,在 onload 里事件对象 e.targer.result 接受到的就是 base64 格式的图片本身

初涉尘世,有不对的地方或有其他好的方法欢迎指教!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端获取本地图片的方式有多种,比如使用`<input type="file">`标签或者拖拽上传等方式。不过无论使用哪种方式,最终都需要将图片数据传到后端进行处理。 以下是一个基于 jQuery 的示例代码,演示了如何使用 Ajax 将图片数据发送到后端 PHP 脚本: HTML: ```html <input type="file" id="file-input"> <button id="upload-btn">上传图片</button> ``` JavaScript: ```javascript // 监听文件选择事件 $('#file-input').on('change', function() { // 获取选中的文件 var file = this.files[0]; // 创建 FileReader 对象 var reader = new FileReader(); // 读取文件数据 reader.readAsDataURL(file); // 当文件读取完成时 reader.onload = function() { // 显示预览图 $('#preview').attr('src', reader.result); } }); // 监听上传按钮点击事件 $('#upload-btn').on('click', function() { // 获取图片数据 var imageData = $('#preview').attr('src'); // 发送数据到后端 PHP 脚本 $.ajax({ url: 'upload.php', method: 'POST', data: { image: imageData }, success: function(response) { // 处理上传成功后的逻辑 console.log('上传成功:' + response); }, error: function() { // 处理上传失败后的逻辑 console.log('上传失败'); } }); }); ``` 后端 PHP 脚本: ```php <?php // 获取图片数据 $imageData = $_POST['image']; // 将图片数据解码为二进制数据 $imageData = base64_decode(str_replace('data:image/png;base64,', '', $imageData)); // 生成文件名 $filename = uniqid() . '.png'; // 存储图片文件 file_put_contents($filename, $imageData); // 存储文件信息到数据库 // ... // 返回上传成功的响应 echo '上传成功'; ?> ``` 上面的示例代码仅供参考,具体实现可以根据实际需求进行调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值