异步上传图片的几种方式

最新推荐文章于 2023-06-16 11:53:09 发布
最新推荐文章于 2023-06-16 11:53:09 发布
阅读量410 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45659878/article/details/105157863
版权

使用jquery.form.js插件实现

  1. HTML页面
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Scripts/jquery.form.js"></script>
</head>
<body>
    <form enctype="multipart/form-data" method="post" id="upload">
        <input type="file" id="fileupload" name="Upload" />
        <input type="button" value="上传图片" id="btn">
        <div id="resultDiv"></div>
    </form>
    <script>
        $("#btn").click(function () {
            $("#upload").ajaxSubmit({
                url: "../Home/UploadFile",
                type: "post",
                success: function (data) {
                    $("#resultDiv").html("<img src='" + data._data._url + "' />");
                },
                error: function (error) {
                    console.log(error);
                }
            });
            return false;
        });
    </script>
</body>
</html>
  1. 控制器（Controller）
public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult UploadFile()
        {
            HttpPostedFileBase file = Request.Files[0];
            if (file != null)
            {
                string fileName = Path.GetFileName(file.FileName);
                string fileExt = Path.GetExtension(file.FileName);
                string fileNewName = Guid.NewGuid() + fileExt;
                string fileSaveDir = Server.MapPath("~/upload");
                if (!Directory.Exists(fileSaveDir))
                {
                    Directory.CreateDirectory(fileSaveDir);
                }
                file.SaveAs(Path.Combine(fileSaveDir, fileName));
                return new JsonResult
                {
                    Data = new
                    {
                        _code = 200,
                        _msg = "上传成功",
                        _data = new
                        {
                            _url = "/Upload/" + fileName,
                            _oldName = fileName
                        }
                    }
                    ,
                    JsonRequestBehavior = JsonRequestBehavior.DenyGet
                };
            }
            return new JsonResult
            {
                Data = new
                {
                    _code = 200,
                    _msg = "上传失败"
                },
                JsonRequestBehavior = JsonRequestBehavior.DenyGet
            };
        }
    }
何兮&
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
使用JQuery异步上传插件ajaxFileUpload 上传图片回显及查看需要点击idea一次才能访问到图片问题
lifayuya的博客
09-02 405
使用JQuery异步上传插件ajaxFileUpload 上传图片回显及查看需要点击idea一次才能访问到图片问题 原因：idea编译生成一个资源文件夹，所有的静态资源都要到该文件夹下访问，存储位置不为此文件夹时，点击idea时才会再次更新静态资源，所以图片才可以访问。 解决办法：存储位置改为idea编译存储的文件夹下。 ...
js异步上传多张图片插件的使用方法
11-29
本文为大家分享了js异步上传多张图片插件的使用方法，供大家参考，具体内容如下 效果展示： 功能描述： 1.实现图片预览，预览图片移除，任意张数异步上传，上传进度条指示，已选中且上传的图片不会重复上传，且不能移除 使用方法： 界面顶部引入IMGUP.css，2.0版本以下的Jquery，页面底部引入IMGUP.js 界面中必须存在三个元素 1、图片选择： id必须是“div_imgfile”，可以是任意元素，onclick事件触发选择对话框 2、图片预览容器：id必须是“div_imglook”的div，里面包含一个清除浮动的div 3、确定上传按钮：id必须是“btn_ImgUpSta
异步ajax图片上传
weixin_46427348的博客
05-11 914
如图所示我们想要在选择图片上传时把图片在提交前上传到服务器 并且回显到这个位置时 需要使用ajax的异步上传操作 1.需要导入要使用的jquery 和 ajax 专门处理异步文件上传js文件 jsp页面引入 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script> <script type="text/javascr.
如何一步步实现异步上传图片并预览图片(异步加载图片)
liudachu的博客
09-03 1878
写在开头 最近在做一个美食博客的网站系统，还没有完工，在制作发布文章页面的时候(类似CSDN的Markdown写文章的功能)，碰到了需要上传文章图片的的需求，实不相瞒，耗了不少脑细胞！！ 准备：文件上传功能   文件上传功能的实现网上和CSDN有很多的教程，我在这里就简单写一下了哈，如果有不了解的朋友，可以看我的之前学习SSM时候的一篇笔记 “SpringMVC中的文件和上传” 我在实现上传图片的时候就使用以下Controller接口， package com.chif.contro.
【OSS】SpringBoot搭配线程池整合阿里云OSS实现图片异步上传
陈宝子的博客
09-21 2029
在之前写过阿里OSS图片上传的案例和文章【OSS】服务端签名后直传实现阿里云存储上传文件前端传递单个或多个图片到后端；后端对图片进行处理，并上传至图床；上传完毕之后，返回图片链接给前端。【OSS】服务端签名后直传实现阿里云存储上传文件之中的章节1到3.1相同，因此这里不再过多重复了。
异步上传图片
xxwd12的博客
09-06 1091
1、样式 <input class="btn-large" type="button" onclick="$('#certiimg').click();" value="上传图片"/> <input type="file" style="display: none" id="certiimg" accept="image/gif,image/jpeg,image/jpg,im...
使用Vue实现图片上传的三种方式
12-07
- 第三种方式是将图片转换为Base64编码，以字符串形式直接发送到服务器。这种方式适用于小文件，因为Base64编码会增加文件大小约33%。前端通过FileReader API读取文件并进行Base64编码，然后将编码后的字符串作为...
图片异步动态上传
02-08
"64位图片上传ajaxupload"可能指的是使用了某种特定的处理方式来处理64位编码的图片，并结合AjaxUpload技术实现异步上传。 首先，我们要理解64位图片是什么。在计算机科学中，64位通常指的是数据宽度，但在这里，...
Thinkjs 单图片异步上传demo源代码
03-18
【标题】"Thinkjs 单图片异步上传demo源代码" 涉及的主要知识点是基于Thinkjs框架的图片异步上传技术，这是一种常见的前端与后端交互方式，用于提高用户体验，实现用户在无需刷新页面的情况下完成图片上传。...
JS实现异步上传压缩图片
10-19
首先，要实现异步上传图片，我们需要使用HTML5的File API。File API允许我们直接在浏览器中访问用户选择的文件，而无需服务器的参与。在这个示例中，我们通过`<input type="file">`元素让用户选择图片，并在`change`...
ajax异步上传图片
11-15
在IT行业中，异步上传是一种常见的用户交互技术，特别是在网页应用中，如图片上传功能。这里我们关注的是使用JSP（JavaServer Pages）配合AjaxFileUpload和Servlet实现不刷新页面的多张图片异步上传。这种方法可以...
预览+ajax图片异步多图上传
06-20
图片预览+ajax图片异步多图上传，代码简单，易于使用。。
PHP 结合jquery异步上传图片
06-02
NULL 博文链接：https://onestopweb.iteye.com/blog/2324536
实现异步上传图片【前后端分离】
小柚的博客
08-24 511
/ 上传成功后，图片地址放入产品表单的隐藏域中。// 上传成功后，图片回显到pImage上。
异步上传图片方法
zhanglir333的博客
01-10 582
对于异步上传来说，如果仍想用文件直接上传方法的话，可以采用HTML5的FormData，具体操作可以参考这篇博客。http://www.cnblogs.com/lhb25/... 本人还有另外一种异步上传图片的方法。先将图片转换成base64字符串，然后再把base64字符串提交到服务器上，服务器接收后，可以再用具体的API将base64字符串转换成图片内容。以下为具体实现方法： va
Spring Boot 多线程异步上传图片、处理水印、缩略图
z_ssyy的博客
06-16 374
我画了一张简单的示意图，在这个项目中，客户端一次上传10多张图片，每个图片单独上传，等待所有图片上传返回200后，继续执行操作，如果一步一步处理，客户端需等待服务器处理完所有逻辑，这样浪费没必要的时间。工具类获取出了扩展名，因为扩展名对图片处理工具类有用，他通过扩展名识别图片格式，所以这个必须有，如代码，生成了一个使用随机码命名，但带有.png扩展名的临时文件，保存在默认临时路径以供处理。文件的，但如果使用异步处理，肯定是这边线程还没处理完，那边Controller层已经return了，这个。
图片上传并异步提交
小粗腿儿的博客
05-05 427
多图上传并实时预览原创
Jquery实现异步上传图片
05-21 1615
利用jQuery的ajax函数就可以实现异步上传图片了。一开始我是想在处理程序中，直接用context.Request.Files来获取页面中的input file，但是不知道为什么一次获取不了。网上说的，Form中要设置enctype="multipart/form-data"和 method="post"，input file中要加runat="server"，但都加了依然获取不到。哪位大侠知
前端图片异步上传
qq_36709020的博客
05-08 738
前端图片上传
form表单的提交有哪几种
最新发布
07-22
form 表单的提交有以下几种方式： 1. GET 方法提交：当表单的 `method` 属性设置为 `GET` 时，表单数据会附加在 URL 的查询参数中，通过 GET 请求发送给服务器。这种方式适用于对数据安全性要求不高、数据量较小的情况，例如搜索表单。 2. POST 方法提交：当表单的 `method` 属性设置为 `POST` 时，表单数据会作为请求的内容体发送给服务器。这种方式适用于传输敏感数据或者数据量较大的情况，例如用户注册或登录表单。 3. AJAX 提交：使用 JavaScript 的 XMLHttpRequest 或 Fetch API，可以通过异步的方式将表单数据发送给服务器。这种方式可以在不刷新整个页面的情况下发送数据，并且可以处理服务器返回的结果，实现无刷新的交互效果。 4. File Upload 提交：当表单包含文件上传字段时，可以使用特殊的 enctype 属性（如 `enctype="multipart/form-data"`）以及相应的后端处理逻辑来实现文件的上传。这种方式适用于需要上传文件的场景，例如上传图片、视频等。 5. 使用 JavaScript 提交：通过 JavaScript 可以监听表单的提交事件，并自定义处理逻辑。可以使用 JavaScript 构建请求并将表单数据发送给服务器，例如使用 Fetch API 或其他 AJAX 库来完成提交操作。 需要注意的是，在表单提交时，通常会通过设置 `action` 属性指定处理表单数据的后端地址。同时，表单字段需要通过 `name` 属性来标识，以便后端能够正确解析和处理数据。 根据具体的需求和场景，可以选择适合的提交方式来实现表单数据的传输和处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

何兮&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值