拖放式上传

了解之前，先看看这篇《实现MultipartStreamProvider经Web API上传文档或图片》https://www.cnblogs.com/insus/p/22954598
然后在其基础上，修改。

浏览效果如下，拖放，选择上传或者粘贴图片链接上传。有关图片链接上传，需要处理跨域，如果服务器允许 CORS。将响应转换为 Blob，再包装成 File 对象。

html markup

 

<div>
    <div id="dropZone" class="drop-zone">
        <p>将图片拖到此处，或</p>
        <input id="FileImage" type="file" accept="image/jpg,image/jpeg,image/png,image/tiff" />
        <input id="Button_Upload" type="button" value="上传" />
        <br />
        <br />
        <label>或输入图片链接：</label>
        <input id="ImageUrl" type="text" />
        <input id="Button_UploadUrl" type="button" value="上传链接" />
    </div>
</div>

 

css style，

<style>
    .drop-zone {
        border: 2px dashed #ccc;
        border-radius: 10px;
        margin: 25px;
        padding: 30px;
        text-align: center;
        background-color: #fafafa;
        transition: all 0.3s;
    }

        .drop-zone.dragover {
            border-color: #409eff;
            background-color: #ecf5ff;
        }
</style>

 
跨域设置：

const acao = 'http://localhost:54522';

 

javascript代码，上传核心方法：

 

在html markup中，有设定5个id，在javascript中找到它们。

const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('FileImage');
const uploadButton = document.getElementById('BtnUpload');
const urlInput = document.getElementById('ImageUrl');
const urlButton = document.getElementById('BtnUploadUrl');

 

 // 点击上传按钮
 uploadButton.addEventListener('click', () => {
     if (fileInput.files.length === 0) {
         alert('请先选择图片');
         return;
     }
     uploadFile(fileInput.files[0]);
 });

 // 拖放处理
 dropZone.addEventListener('dragover', (e) => {
     e.preventDefault();
     dropZone.classList.add('dragover');
 });
 dropZone.addEventListener('dragleave', (e) => {
     e.preventDefault();
     dropZone.classList.remove('dragover');
 });
 dropZone.addEventListener('drop', (e) => {
     e.preventDefault();
     dropZone.classList.remove('dragover');
     const file = e.dataTransfer.files[0];
     if (file) {
         uploadFile(file);
     } else {
         alert('请拖入图片文件');
     }
 });

 

 

 urlButton.addEventListener('click', async () => {
     const imageUrl = urlInput.value.trim();
     if (!imageUrl) {
         alert('请输入图片链接');
         return;
     }
     try {
         const response = await fetch(imageUrl, { mode: 'cors' });
         if (!response.ok) throw new Error('获取图片失败');
         const blob = await response.blob();
         const file = new File([blob], 'image_from_url.jpg', { type: blob.type || 'image/jpeg' });
         uploadFile(file);
         urlInput.value = '';
     } catch (err) {
         alert('无法下载图片，请检查链接或跨域策略');
         urlInput.value = '';
     }
 });

 

链接上传，附加辅助功能。
本随笔，着重演示拖放上传功能，替代传统选择文件，点上传。产生效益与效率。