javascript - 如何使用Java脚本在文本区域上传图像
问题描述
我将尝试上传图片，但我不知道如何上传使用 java-script 或 php 的语言类型-script，我提前告诉你，我没有使用正确的java脚本代码，因为我不知道如何在我的项目中使用代码，请我是这个领域的新手，我需要你的帮助这个。我将在下面的代码后向您显示错误。提前致谢
<div class="imgbob-home-modal">
<div class="modal modal-blur fade" id="modal-full-width" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-full-width modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<span>JPEG JPG PNG GIF</span>
<span> - </span>
<span>Max 10 MB</span>
</h5>
<span class="float-right imgbob-reset-button d-none">
<div class="upload-more" id="imgbob-upload-clickable">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" />
<polyline points="9 15 12 12 15 15" />
<line x1="12" y1="12" x2="12" y2="21" />
</svg>
Upload more
</div>
</span>
<button type="button" class="btn-close btn-close-here" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="imgbob-main-upload-section">
<div id="upload-process">
<div id="imgbob-uploader-box" class="imgbob-uploader-box">
<div id="imgbob-upload-clickable" class="imgbob-uploder-place" >
<div class="imgbob-upload-icon">
<img class="img-responsivee" src="https://imgbob.com/images/sections/upload.svg" alt="">
</div>
<h3>Drag and drop or <span>browse</span> images here to upload</h3>
<p>You can upload 5 images in one time.</p>
<p><span>Max Filesize. 10 MB(s)</span></p>
</div>
</div>
<div class="uploaded-success row" id="imgbob-preview-uploads"></div>
<div>
<div id="imgbob-drop-template" class="col-lg-4 mb-3 m-auto imgbob-uploader-area d-none">
<div class="imgbob-card fade-in">
<span class="success-icon-box d-none fade-in">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
</span>
<span class="error-icon-box d-none fade-in">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
</span>
<div class="remove-icon">
<i data-dz-remove class="fa fa-remove"></i>
</div>
<img data-dz-thumbnail class="imgbob-upload-icon">
<div class="imgbob-images-upload">
<div class="imgbob-images-name" data-dz-name></div>
<div class="imgbob-uploder-progress">
<div class="alert alert-danger alert-error d-none" role="alert"></div>
<textarea readonly class="form-control success-input d-none" rows="2"></textarea>
<a href="#" target="_blank" class="btn btn-primary btn-view success-button d-none">View image</a>
<div class="progress upload-progress">
<div data-dz-uploadprogress class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 0%" aria-valuemin="0" aria-valuemax="100">Uploading...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我要上传图片时可能遇到的错误
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#206bc4">
<meta name="description" content="Upload images, Upload files, Free image hosting and sharing service, upload pictures, photo host, images to forums, Free images upload,">
<meta name="keywords" content="free image hosting, image uploader, forum image hosting, image upload mod, image host, photo sharing, upload pictures, upload images, upload files, share images">
<meta property="og:title" content="Upload and share your images." />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Imgbob" />
<meta property="og:url" content="https://imgbob.com" />
<meta property="og:image" content="https://imgbob.com/images/main/logo.png" />
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="Upload images, Upload files, Free image hosting and sharing service, upload pictures, photo host, images to forums, Free images upload,">
<meta name="twitter:title" content="Imgbob — Upload and share your images.">
<meta name="twitter:site" content="https://imgbob.com">
<meta name="csrf-token" content="NU6cJj2GtY8VgE1QZ35qsA1EomEDLPMDqJPiyvzA">
<title>Ackta — Upload and share your images.</title>
<link href="ackta-fav.png" rel="shortcut icon">
<link href="ackta-fav.png" type="image/png" rel="icon" sizes="192x192">
<link rel="apple-touch-icon" href="https://imgbob.com/images/main/favicon.ico" sizes="180x180">
<link href="https://imgbob.com/assets/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet" />
<link href="https://imgbob.com/assets/fontawesome/font-awesome.min.css" rel="stylesheet" />
<link href="https://imgbob.com/assets/fontawesome/font-awesome-animation.min.css" rel="stylesheet" />
<link href="https://imgbob.com/assets/libs/dropzone/dropzone.min.css" rel="stylesheet" />
<link href="https://imgbob.com/assets/css/app.css" rel="stylesheet" />
<link href="https://imgbob.com/assets/css/app-vendors.css" rel="stylesheet" />
<link href="https://imgbob.com/assets/css/ibob.css" rel="stylesheet" />
<script data-ad-client="ca-pub-8320136810729992" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body class="imgbob_home_body">
<script>
"use strict";
const SITE_URL= "";
const MAX_FILES= 5;
const MAX_SIZE = 10;
const BIG_FILES_DETECTED = "This File Type not Allowed.";
</script>
<div class="imgbob-drag-zone" id="imgbob-drag-zone">
<div class="ibobdrag imgbob-drag-zone-place">
<div class="imgbob-home-modal">
<div class="modal modal-blur fade" id="modal-full-width" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-full-width modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<span>JPEG JPG PNG GIF</span>
<span> - </span>
<span>Max 10 MB</span>
</h5>
<span class="float-right imgbob-reset-button d-none">
<div class="upload-more" id="imgbob-upload-clickable">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" />
<polyline points="9 15 12 12 15 15" />
<line x1="12" y1="12" x2="12" y2="21" />
</svg>
Upload more
</div>
</span>
<button type="button" class="btn-close btn-close-here" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="imgbob-main-upload-section">
<div id="upload-process">
<div id="imgbob-uploader-box" class="imgbob-uploader-box">
<div id="imgbob-upload-clickable" class="imgbob-uploder-place" >
<div class="imgbob-upload-icon">
<img class="img-responsivee" src="https://imgbob.com/images/sections/upload.svg" alt="">
</div>
<h3>Drag and drop or <span>browse</span> images here to upload</h3>
<p>You can upload 5 images in one time.</p>
<p><span>Max Filesize. 10 MB(s)</span></p>
</div>
</div>
<div class="uploaded-success row" id="imgbob-preview-uploads"></div>
<div>
<div id="imgbob-drop-template" class="col-lg-4 mb-3 m-auto imgbob-uploader-area d-none">
<div class="imgbob-card fade-in">
<span class="success-icon-box d-none fade-in">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
</span>
<span class="error-icon-box d-none fade-in">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
</span>
<div class="remove-icon">
<i data-dz-remove class="fa fa-remove"></i>
</div>
<img data-dz-thumbnail class="imgbob-upload-icon">
<div class="imgbob-images-upload">
<div class="imgbob-images-name" data-dz-name></div>
<div class="imgbob-uploder-progress">
<div class="alert alert-danger alert-error d-none" role="alert"></div>
<textarea readonly class="form-control success-input d-none" rows="2"></textarea>
<a href="#" target="_blank" class="btn btn-primary btn-view success-button d-none">View image</a>
<div class="progress upload-progress">
<div data-dz-uploadprogress class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 0%" aria-valuemin="0" aria-valuemax="100">Uploading...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="topA container">
<div class="imgbob__top_ads text-center">
<div class="col-auto d-none d-md-flex">
</div>
<div class="col-auto d-flex d-md-none">
</div>
</div>
</div>
<div class="imgbob-uploader-out" id="imgbob-uploader-out">
<div id="imgbob-upload-clickable" class="imgbob-home-page-content imgbob-uploder-out-place">
<div class="container-xl">
<div class="row justify-content-center">
<div class="col-10">
<div class="imgbob-home-text text-center">
<svg xmlns="http://www.w3.org/2000/svg" class="faa-bounce animated icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" /><polyline points="9 15 12 12 15 15" /><line x1="12" y1="12" x2="12" y2="21" /></svg></span>
<h2 class="imgbob-big-title">Upload and share your images.</h2>
<p class="imgbob-description d-mobile-none">
Drag and drop anywhere you want and start uploading your images now. 10 MB limit. (JPG, PNG, GIF) You can upload 5 images in one time.
</p>
<button id="imgbob-upload-clickable" class="imgbob-strat-uploading btn btn-primary">Start uploading</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://imgbob.com/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://imgbob.com/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="https://imgbob.com/assets/libs/sweetalert/sweetalert.min.js"></script>
<script src="https://imgbob.com/assets/js/app.js"></script>
<script src="https://imgbob.com/assets/libs/dropzone/dropzone.min.js"></script>
<script src="https://imgbob.com/assets/js/home/ibob.js"></script>
<script src="https://www.google.com/recaptcha/api.js?" async defer></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141278-2"></script>
</body>
</html>解决方案
推荐阅读
- windows - 子上下文菜单的“git bash here”在 Windows 根路径中打开
- php - 单个查询中的多个联接
- ios - 如何在 WKWebView 中覆盖 urlRequest
- web-scraping - 如何在jsoup中加载文档之前获取http内容长度
- amazon-web-services - AWS 控制台会话超时
- python - 嵌套 for 循环在 Python 中花费大量时间（优化）
- node.js - Websocket同步两路连接
- java - 如何在groovy测试用例中验证java的arraylist的每个条目
- vba - 为什么这个 VBA 代码会破坏 Excel？
- c++ - 流默认具有哪种语言环境