html5上传图片后立即显示出来

最新推荐文章于 2024-06-29 16:04:34 发布
最新推荐文章于 2024-06-29 16:04:34 发布
阅读量2.5k 收藏 9
点赞数 3
文章标签： 上传图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44886807/article/details/93615320
版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>html5上传后立即显示</title>
    <script type="text/javascript">
        function ProcessFile(e) {
            var file = document.getElementById('file').files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    var txt = event.target.result;

                    var img = document.createElement("img");
                    img.src = txt;//将图片base64字符串赋值给img的src
                   // console.log(txt);
                    document.getElementById("result").appendChild(img);
                };
            }
            reader.readAsDataURL(file);
        }

        function contentLoaded() {
            document.getElementById('file').addEventListener('change',
                ProcessFile, false);
        }

        window.addEventListener("DOMContentLoaded", contentLoaded, false);
    </script>
</head>
<body>
请选取一个图像文件: <input type="file" id="file" name="file"/>
<div id="result"></div>
<div><img src="1.jpg"></div>
</body>
</html>

weiwei一笑
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS+HTML5实现上传图片预览效果
06-13
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
html元素中，可以上传文件的唯一控件就是<input type="file">啦
weixin_30617737的博客
02-21 1666
值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才会认识并正确执行。但是还有一点，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了...
HTML5 文件上传的2种方式
最新发布
alisky119的博客
06-29 1429
百度WEBUPLOADER上传视频等大文件，WEBUPLOAD组件实现文件上传功能和下载功能，JS大文件切片上传，断点续传实现DEMO，前端上传大文件的解决方案，前端上传大文件处理（切片、断点续传），前端大文件上传优化方案——分片上传，vue大文件上传解决方案，vue大文件上传解决方案10G，vue大文件上传解决方案50G，vue大文件上传解决方案100G，html5如何实现大文件断点续传、秒传，id=e1f49f3e1d4742e19135e00bd41fa3de。
html实现图片上传的效果
卓卓卓
02-02 4870
<html> <head></head> <style> *{ padding: 0; margin: 0 atuo; } .top{ height: 300px; width: 1000px; display: flex; justify-content: space-between; } .left{ text-align: center; width...
HTML图片上传服务器
weixin_47568795的博客
03-13 1109
html图片上传服务器
js实现对上传图片进行压缩并且预览
感恩、奋进、自信
12-08 5万+
js实现对上传图片的路径转成base64编码，并且对图片进行压缩，实现预览功能 需要先引入jquery:  1、html如下 2、css如下 #previewImg{ background-color: black; width: 400px;
html5图片上传裁剪成头像代码
06-24
实时预览可以在用户调整图片时立即显示结果，拖放支持让用户更方便地添加文件，多选文件可以一次处理多个图片，而错误处理则确保在出现问题时给出友好的提示。 6. **兼容性**：虽然HTML5的这些特性在现代浏览器中...
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
10-15
通过以上方法，可以实现一个美观且功能强大的自定义上传图片按钮，并在用户上传文件后立即在页面上显示出来。这些技术点在现代Web前端开发中是非常基础但又必不可少的技能，熟练掌握它们对于提升开发效率和用户体验...
html5图片上传预览示例分享
09-28
### HTML5图片上传预览知识点详解 #### 一、HTML5概述 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它在HTML4的基础上进行了大量的改进和扩展，提供了更多实用的新特性。其中，对于多媒体的...
SpringMVC多个文件上传及上传后立即显示图片功能
08-29
SpringMVC多个文件上传及上传后立即显示图片功能 在本节中，我们将讨论如何使用 SpringMVC 实现多个文件上传并在上传后立即显示图片的功能。 一、多文件上传 在 SpringMVC 中，我们可以使用 `MultipartFile` 对象...
HTML5图片压缩上传预览效果代码.zip
07-11
这个“HTML5图片压缩上传预览效果代码”压缩包正是利用了这些特性，帮助用户在上传图片前进行压缩，降低图片大小，从而节省服务器存储空间，并提供压缩前后的预览功能。下面我们将详细探讨相关的HTML5技术以及实现这...
html多图片上传并在线预览
01-10
html多图片上传并在线预览 用javascript实现
简单的html网页图片上传,10个有用的HTML文件上传技巧
weixin_39778393的博客
06-04 3480
上传文件的能力是许多Web和移动应用的关键需求，从将照片上传到社交媒体上到将简历发布到工作门户网站上，文件上传无处不在。作为一名Web开发人员，我们一定知道HTML提供了原生文件上传的支持，并借助于JavaScript的一点帮助。在HTML5中，File API被添加到DOM中。利用它，我们可以读取 FileList 和其中的 File 对象，这就解决了文件的多种用例，即在本地加载文件或通过网络发...
HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） (1)
m0_74918915的博客
04-03 941
这篇博客直接在上篇的基础上完成，最终效果：效果图1：效果图2：好了，请允许我把图片贴了两遍，方便大家看效果了~可以看出我们的图片的li的html其实还是挺复杂的，于是我把html文档做了一些修改：可以看到我把li的显示，独立写到了一个div#template，默认是hidden的，这样做的好处是什么呢？避免我们每上传一个文件，在js中出现大量的创建元素与赋属性的代码，一般设计比较复杂的html元素的生成，建议使用这种方式，可以简化代码，也利于我们代码的后期维护。Js代码：/**
HTML上传图片并实时更新显示
hys__handsome的博客
12-28 5758
页面效果图 原理 获取文件数据 将文件上传后，文件会缓存在浏览器中并生成了对应的file对象，这时我们就可以通过file对象获得文件数据。 //获取上传文件的信息 var upfile = document.getElementById('pic').files[0]; 生成文件URL 生成file对象的URL（查看浏览器中的网络包可以知道有一部分是uuid） //生成文件url var sr = window.URL.createObjectURL(upfile); 图片实时显
html中咋样上传照片,如何通过html上传照片（自定义上传图标）
weixin_29545089的博客
06-08 8691
在移动web的开发过程中。我们常常会遇到这样问题。就是上传照片。那么我们所知道的上传控件其实有很多。以.NET为例则有FileUpload控件。这个控件上传比较容易。但是样式比较丑陋。接下来我们讲讲如何利用html上传照片。废话不多说。我们来看一段html代码 账号头像*：修改头像从上面的代码我们可以看到。我们上传的控件外部使用的是form表单。enctype：表示的是我们的表单类型target：...
HTML本地上传图片并显示
weixin_46650094的博客
04-02 2139
这段代码创建了一个包含文件选择器和图片预览的简单 HTML 页面，并使用 JavaScript 监听文件选择器的 onchange 事件。一旦用户选择了一个文件，JavaScript 就会使用 FileReader API 读取文件并将其转换为数据 URL。然后，JavaScript 将数据 URL 设置为图片预览的 src 属性，以显示该图片。
html上传图片后，在页面显示上传的图片
热门推荐
感恩、奋进、自信
12-02 6万+
html上传图片后，在页面显示上传的图片1、html &lt;form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form"&gt; &lt;input type="file" id="chooseImage" n
前端html，js实现图片的上传与下载
m0_68987535的博客
05-06 860
【代码】前端html，js实现图片的上传与下载。
请使用visual studio 以上的版本建立一个.net core mvc 项目，要求目标框架版本至少为.net 6.0，实现以下web功能： （1）页面上居中显示一个"图片上传"区域，下方显示一个 图片显示框 区域 （2）用户将本地图片拖拽到 "图片上传"区域后， 图片即可自动上传，上传完成后图片显示框立即居中显示刚刚上传成功的图片，图片显示的大小为750x750像素。 （3）将接收到的文件保存在服务器端文件夹下，并在数据库中写入相应的记录，数据库可以是任意数据库。
06-12
很高兴为您提供一个使用 Visual Studio 2022 建立的 .NET 6.0 MVC 项目，实现了您要求的图片上传和显示功能。 请按照以下步骤操作： 1. 打开 Visual Studio 2022，点击 "创建新项目"，选择 "ASP.NET Core Web 应用程序"，并选择 "Web 应用程序 (Model-View-Controller)" 模板。 2. 在下一个窗口中，选择目标框架为 ".NET 6.0"，并设置项目名称和位置等信息。点击 "创建" 按钮。 3. 在项目创建完成后，在 "Controllers" 文件夹下创建一个名为 "HomeController.cs" 的控制器，并添加以下代码： ```csharp using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using System; using System.IO; using System.Linq; using System.Threading.Tasks; namespace ImageUpload.Controllers { public class HomeController : Controller { private readonly IWebHostEnvironment _environment; public HomeController(IWebHostEnvironment environment) { _environment = environment; } public IActionResult Index() { return View(); } [HttpPost] public async Task<IActionResult> Upload(IFormFile file) { if (file == null || file.Length == 0) { return BadRequest(); } // 保存文件到服务器文件夹中 var fileName = $"{Guid.NewGuid()}{Path.GetExtension(file.FileName)}"; var filePath = Path.Combine(_environment.WebRootPath, "uploads", fileName); using (var stream = new FileStream(filePath, FileMode.Create)) { await file.CopyToAsync(stream); } // 将文件信息保存到数据库中 using (var context = new ImageUploadContext()) { var image = new Image { FileName = file.FileName, FilePath = fileName, CreatedAt = DateTime.Now }; context.Images.Add(image); await context.SaveChangesAsync(); } return Ok(new { fileName }); } } } ``` 4. 在 "Models" 文件夹下创建一个名为 "Image.cs" 的模型，并添加以下代码： ```csharp using System; namespace ImageUpload.Models { public class Image { public int Id { get; set; } public string FileName { get; set; } public string FilePath { get; set; } public DateTime CreatedAt { get; set; } } } ``` 5. 在 "Models" 文件夹下创建一个名为 "ImageUploadContext.cs" 的数据库上下文，并添加以下代码： ```csharp using Microsoft.EntityFrameworkCore; namespace ImageUpload.Models { public class ImageUploadContext : DbContext { public ImageUploadContext(DbContextOptions<ImageUploadContext> options) : base(options) { } public DbSet<Image> Images { get; set; } } } ``` 6. 在 "Views" 文件夹下创建一个名为 "Index.cshtml" 的视图文件，并添加以下代码： ```html @{ ViewData["Title"] = "Home Page"; } <div class="text-center"> <div class="dropzone" id="dropzone"> <h2>图片上传</h2> <p>将本地图片拖拽到此区域即可上传</p> </div> <div class="image-container" id="image-container"></div> </div> @section Scripts { <script> var dropzone = document.getElementById("dropzone"); var imageContainer = document.getElementById("image-container"); dropzone.addEventListener("dragover", function (event) { event.preventDefault(); dropzone.classList.add("dragover"); }); dropzone.addEventListener("dragleave", function (event) { event.preventDefault(); dropzone.classList.remove("dragover"); }); dropzone.addEventListener("drop", function (event) { event.preventDefault(); dropzone.classList.remove("dragover"); var files = event.dataTransfer.files; if (files.length > 0) { var formData = new FormData(); formData.append("file", files[0]); fetch("/Home/Upload", { method: "POST", body: formData }) .then(response => response.json()) .then(data => { var imageUrl = "/uploads/" + data.fileName; var image = new Image(); image.src = imageUrl; image.onload = function () { var width = image.width; var height = image.height; var scale = Math.min(750 / width, 750 / height); var scaledWidth = width * scale; var scaledHeight = height * scale; imageContainer.innerHTML = ""; imageContainer.appendChild(image); image.style.width = scaledWidth + "px"; image.style.height = scaledHeight + "px"; }; }); } }); </script> } ``` 在上述代码中，我们使用了 HTML5 的拖放 API 来实现将图片拖拽到 "图片上传" 区域即可上传的功能。上传完成后，我们使用 JavaScript 代码将图片显示在 "图片显示框" 区域中，并自动调整其大小为 750x750 像素。 7. 在 "wwwroot" 文件夹下创建一个名为 "uploads" 的文件夹，用于存储上传的图片。 8. 在 "appsettings.json" 文件中添加数据库连接字符串，如下所示： ```json { "ConnectionStrings": { "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=ImageUpload;Trusted_Connection=True;MultipleActiveResultSets=true" }, "Logging": { "LogLevel": { "Default": "Information", "Microsoft": "Warning", "Microsoft.Hosting.Lifetime": "Information" } }, "AllowedHosts": "*" } ``` 9. 在 "Startup.cs" 文件中添加以下代码，来配置使用 EF Core 连接数据库： ```csharp using ImageUpload.Models; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.EntityFrameworkCore; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; namespace ImageUpload { public class Startup { public IConfiguration Configuration { get; } public Startup(IConfiguration configuration) { Configuration = configuration; } public void ConfigureServices(IServiceCollection services) { services.AddDbContext<ImageUploadContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); services.AddControllersWithViews(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); }); } } } ``` 10. 运行项目，即可在浏览器中查看效果。 以上就是一个简单的 .NET 6.0 MVC 项目，实现了将图片上传到服务器并在页面上显示的功能。注意，本示例中使用的是 SQL Server 数据库，您可以根据需要将其更改为其他数据库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值