検索
ホームページウェブフロントエンドライユイのチュートリアルLauiuiでの画像アップロードの詳しい説明（コード付き）

Lauiuiでの画像アップロードの詳しい説明（コード付き）

尚
尚
Nov 26, 2019 pm 01:40 PM
layui

Lauiuiでの画像アップロードの詳しい説明（コード付き）

layui アップロードはブートストラップ アップロードに似ていますが、プラグインをダウンロードする必要がない点が異なります。

layui 独自のもので十分です。見てみましょう。最初にフロント インターフェースで使用します。使用するアップロードは次のとおりです。アバター

Lauiuiでの画像アップロードの詳しい説明（コード付き）

最初にクリックしてアップロードを開始します。アバターがサーバーにアップロードされます。

JSON を返しますそれをフォームに追加し、他のデータと一緒に送信します

最初に JSP インターフェイスを見てみましょう

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人资料</title>
<link href="${pageContext.request.contextPath }/js/layui/css/layui.css"
    rel="stylesheet" />
<script src="${pageContext.request.contextPath }/js/layui/layui.js"
    charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
        layui.use(&#39;upload&#39;,function(){
            var upload = layui.upload;
            upload.render({
                elem: &#39;#fileBtn&#39;
                ,url: &#39;../updatePersonalById.do&#39;
                ,accept: &#39;file&#39;
                ,auto: false
                ,bindAction: &#39;#uploadBtn&#39;
                ,done: function(res){
                    alert(res.data.src);
                    $("[name=userImage]").val(res.data.src);
                }
            });
        });
    </script>

</head>
<body>
    <form class="layui-form" action="../updatePersonalByIdSuccess.do" method="post" charset="utf-8" target="_parent">
         <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
              <input type="text" name="userId" required  lay-verify="required" value="${ui.userId }" autocomplete="off" readonly="readonly" class="layui-input">
            </div>
          </div>
           <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block">
              <input type="text" name="userName" required  lay-verify="required" value="${ui.userName }" autocomplete="off" readonly="readonly" class="layui-input">
            </div>
          </div>
           <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
              <input type="password" name="userPwd" required  lay-verify="required" value="${ui.userPwd }" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
              <input type="password" name="reuserPwd" required  lay-verify="required" value="${ui.userPwd }" autocomplete="off" class="layui-input">
            </div>
          </div>
           <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
              <input type="text" name="userrealName" required  lay-verify="required" value="${ui.userrealName }" autocomplete="off" class="layui-input">
            </div>
          </div>
           <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
              <input type="text" name="userPhone" required  lay-verify="required" value="${ui.userPhone }" autocomplete="off" class="layui-input">
            </div>
          </div>
           <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
              <input type="text" name="userAds" required  lay-verify="required" value="${ui.userAds }" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-upload">
                <label class="layui-form-label">头像:</label>
                <div class="layui-upload layui-input-block">
                    <input type="hidden" name="userImage" value="${ui.userImage }" required lay-verify="required" />
                    <button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon">&#xe67c;</i>选择文件</button>
                    <button type="button" class="layui-btn layui-btn-warm" id="uploadBtn">开始上传</button>
                </div>
            </div>
             <div class="layui-form-item" style="margin-top: 20px;">
                  <div class="layui-input-block">
                  <button class="layui-btn" id="btn1" lay-submit lay-filter="formDemo">提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
             </div>
          
    </form>
</body>
</html>

Controller.do

package com.supermanager.controller;

import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.List;
import java.util.Random;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.supermanager.entity.LogsInfo;
import com.supermanager.entity.RoleInfo;
import com.supermanager.entity.StoragesInfo;
import com.supermanager.entity.UserInfo;
import com.supermanager.service.LogsService;
import com.supermanager.service.RoleInfoService;
import com.supermanager.service.StoragesService;
import com.supermanager.service.UserInfoService;

import net.sf.json.JSONArray;

@Controller
@Scope("prototype")
public class UserInfoController {

    @Resource
    private UserInfoService userInfoService;
    @Resource
    private LogsService logService;
    @Resource
    private RoleInfoService roleInfoService;
    @Resource
    private StoragesService storagesService;
    

    /**
     * 修改个人资料
     * @param session
     * @param file
     * @param ui
     * @return
     * @throws IOException 
     * @throws IllegalStateException 
     */
    @RequestMapping(value="updatePersonalById")
    public @ResponseBody String updatePersonal(@RequestParam("file") MultipartFile file,@ModelAttribute UserInfo ui,HttpServletRequest request) throws IllegalStateException, IOException{
        String oldName = file.getOriginalFilename();
        String path = request.getServletContext().getRealPath("/upload/");
        String fileName = changeName(oldName);
        String rappendix = "upload/" + fileName;
        fileName = path + "/" + fileName;
        File file1 = new File(fileName);
        file.transferTo(file1);
        String str = "{\"code\": 0,\"msg\": \"\",\"data\": {\"src\":\"" + rappendix + "\"}}";
        return str;
    }
    public static String changeName(String oldName){
        Random r = new Random();
        Date d = new Date();
        String newName = oldName.substring(oldName.indexOf(&#39;.&#39;));
        newName = r.nextInt(99999999) + d.getTime() + newName;
        return newName;
    }
    @RequestMapping(value="updatePersonalByIdSuccess")
    public  String updatePersonalByIdSuccess(@ModelAttribute UserInfo ui){
        UserInfo uif = userInfoService.FindUserByUserId(ui.getUserId());
        ui.setRoleId(uif.getRoleId());
        ui.setUserSex(uif.getUserSex());
        ui.setUserAge(uif.getUserAge());
        int a = userInfoService.Update(ui);
        if(a!=0){
            return "redirect:exitSystem.do";
        }
        return "error";
    }
    
    
    
}

とのやり取りその効果アップロードが成功すると、図のようになります。

Lauiuiでの画像アップロードの詳しい説明（コード付き）

layui 関連の記事については、layui 使用法チュートリアル 列に注目してください。

以上がLauiuiでの画像アップロードの詳しい説明（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
4週間前ByDDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
3週間前ByDDD
Atomfallのクレーンコントロールキーカードを見つける場所
4週間前ByDDD
<🎜>：Dead Rails-すべての課題を完了する方法
1 か月前ByDDD
Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
1 か月前ByDDD
もっと見る

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7705
15
Java チュートリアル
1640
14
CakePHP チュートリアル
1394
52
Laravel チュートリアル
1288
25
PHP チュートリアル
1231
29
もっと見る