html + js 上传 图片

vue 环境

<a href="javascript:;" class="upload right">
    <input @change="fileImage" type="file" accept="image/jpeg,image/x-png,image/gif" id="" value=""/>
</a>
  fileImage(e) {
      var that=this;
      var file = e.target.files[0];
      var imgSize=file.size/1024;
      if(imgSize>1024){
        alert('请上传大小不要超过1M的图片')
      }else{
        // 调用接口,获取你的图片地址
      }
   }

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在HTMLJS上传图片到指定文件夹,可以利用HTML5的File API和XMLHttpRequest对象来实现。 以下是一个简单的HTMLJS代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Upload Image</title> </head> <body> <form> <input type="file" id="fileInput"> <button type="button" onclick="uploadImage()">Upload</button> </form> <script> function uploadImage() { var fileInput = document.getElementById('fileInput'); var file = fileInput.files[0]; var folderName = 'your_folder_name'; // 指定文件夹名 var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php'); // 上传的 PHP 文件 xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.setRequestHeader('X-File-Name', file.name); xhr.setRequestHeader('X-File-Size', file.size); xhr.setRequestHeader('X-File-Type', file.type); xhr.send(file); } </script> </body> </html> ``` 上述代码中,我们首先创建了一个表单,其中包含了一个文件上传控件和一个上传按钮,用户选择文件后点击上传按钮即可上传上传按钮的点击事件调用了名为 `uploadImage()` 的函数。该函数通过 `document.getElementById()` 获取文件上传控件,然后使用 `XMLHttpRequest` 对象发送一个 POST 请求到指定的 PHP 文件(upload.php),并传递了上传的文件对象,以及一些自定义的请求头信息,包括文件名、文件大小和文件类型等。 在 PHP 文件中,我们可以根据传递的请求头信息和文件对象,将文件保存到指定文件夹中。以下是一个简单的 PHP 代码示例: ```php <?php $folderName = $_SERVER['HTTP_X_FOLDER_NAME']; // 获取上传的文件夹名 $fileName = $_SERVER['HTTP_X_FILE_NAME']; // 获取上传的文件名 $fileSize = $_SERVER['HTTP_X_FILE_SIZE']; // 获取上传的文件大小 $fileType = $_SERVER['HTTP_X_FILE_TYPE']; // 获取上传的文件类型 $fileData = file_get_contents('php://input'); // 获取上传的文件内容 $filePath = './uploads/' . $folderName . '/' . $fileName; // 指定上传文件的路径 file_put_contents($filePath, $fileData); // 将上传的文件保存到指定文件夹中 ?> ``` 在上述 PHP 代码中,我们首先获取了上传的文件夹名、文件名、文件大小、文件类型和文件内容等信息,然后根据文件夹名和文件名指定了上传文件的路径,最后使用 `file_put_contents()` 函数将文件保存到指定文件夹中。注意,这里的文件保存路径是相对于 PHP 文件所在的目录的,因此需要根据实际情况修改路径。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值