js php xmlrequest 上传图片

最新推荐文章于 2023-02-02 13:45:06 发布
最新推荐文章于 2023-02-02 13:45:06 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucifer_qiao/article/details/27188675
版权

本来想用插件上传图片的，后来自己写了一个简单的js实现异步的图片上传，不多说上代码非常简单

upload.php

<?php

if(isset($_FILES["myfile"]))
{
    $ret = array();
    $uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
    $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;
    file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
    if(!is_array($_FILES["myfile"]["name"])) //single file
    {
        $fileName = time().uniqid().'.'.pathinfo($_FILES["myfile"]["name"])['extension'];
        move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
        $ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
    }
    echo json_encode($ret);
}

?>

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Html5 Ajax 上传文件</title>
    <meta charset="utf-8">

<script type="text/javascript">


    var xhr;
    function createXMLHttpRequest()
    {
        if(window.ActiveXObject)
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            xhr = new XMLHttpRequest();
        }
    }


    function UpladFile()
    {
        var fileObj = document.getElementById("file").files[0];
        var FileController = 'upload.php';
        var form = new FormData();
        form.append("myfile", fileObj);
        createXMLHttpRequest();
        xhr.onreadystatechange = handleStateChange;
        xhr.open("post", FileController, true);
        xhr.send(form);
    }


    function handleStateChange()
    {
        if(xhr.readyState == 4)
        {
            if (xhr.status == 200 || xhr.status == 0)
            {
                var result = xhr.responseText;
                var json = eval("(" + result + ")");
                alert('图片链接:\n'+json.file);
            }
        }
    }


</script>


<style>
    .txt{ height:28px; border:1px solid #cdcdcd; width:670px;}
    .mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;}
    .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>


<body>

<div class="form-group">
    <label class="control-label">图片</label>
    <br/>
    <input type='text' name='textfield' id='textfield' class='txt' />
    <span οnclick="file.click()"  class="mybtn">浏览...</span>
    <input type="file" name="file" class="file" id="file" size="28" οnchange="document.getElementById('textfield').value=this.value" />
    <span οnclick="UpladFile()" class="mybtn">上传</span>
</div>

</body>


</html>

行者游学
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
XMLhttpRequest.js上传
02-13
XMLHttpRequest（XHR）是Web开发中...总之，“XMLHttpRequest.js上传”涉及了前端JavaScript的异步通信、文件操作、事件处理，以及与服务器端的交互。通过熟练掌握这些技术，你可以创建出更加动态和用户友好的Web应用。
记录一下Vue本地上传文件/图片预览并手动上传图片，并使用XMLHttpRequest解决线上fetch转不了blob的问题
weixin_45969775的博客
01-29 1161
以下为前端使用vue3实现的blodUrl==》blod==》file==》FromData 2023.3.7更新。
前端文件上传3：使用xmlhttprequest上传图片（web项目）
胡世林的博客
01-19 7290
本来之前写过一篇博客，也是使用ajax来上传的图片，但是发现适应性不是那么好，可能是后台做了一些处理吧，然后就自己重新写了个后台（单文件上传），重新写一份代码来上传文件后台代码是用springmvc，还是最最简单的那个，只是存储方面放在了七牛云上前端js代码：（这回与前两回不一样，不使用mui，不使用jq，直接使用原生的xmlhttprequest）
XMLHttpRequest上传文件
m0_60013147的博客
08-13 3332
XMLHttpRequest上传文件，显示文件上传进度
js数据传到request中
sdhuangzheng的博客
04-02 2569
我的需求： 我需要将js产生的验证码从js中拿出来，之后在另一个jsp页面中取出来使用。 由于java和js无法直接传递值，所以要使用hidden这个类型，对于hidden我就不做介绍了，百度一下就知道了。 将以下代码放到你想要将js的值的页面中，我的是登录界面，所以我就直接放在登录界面的body中 <input type="hidden" id="codeSelf" name="JsCode" value="a" /> 之后登录界面的js代码： 我是将res值传到codeSelf中，
JavaScript下通过的XMLHttpRequest发送请求的代码
12-11
使用XMLHttpRequest对象分为4部完成: 1.创建XMLHttpRequest组建 2.设置回调函数 3.初始化XMLHttpRequest组建 4.发送请求 实例代码： 代码如下: var userName; var passWord; var xmlHttpRequest;...
自写phpsoap通讯
03-12
$xmlRequest = '<your-soap-request>'; $headers = array( 'Content-Type: text/xml;charset=utf-8', 'SOAPAction: "http://example.com/namespace/YourFunctionNameHere"', ); $response = sendHttpRequest($url...
用JavaScript实现类似于ListBox功能示例代码
01-19
JavaScript对于多项数据的请求和处理过程中，如何实现常常困扰很多程序员，如何进行动态编辑和删除而不影响其他的数据项，今天介绍一种方法，可供借鉴，例如通过XmlRequest请求到如下数据: 代码如下: ...
XMLHttpRequest构建实例
04-07
XMLHttpRequest（简称XHR）是JavaScript中用于异步数据交换的核心对象，它在Web开发中扮演着重要角色，尤其是在实现Ajax（Asynchronous JavaScript and XML）技术时。Ajax允许网页在不刷新整个页面的情况下与服务器...
JS——XMLHttpRequest 对象
qq_57289939的博客
02-02 2925
JS——XMLHttpRequest 对象
js_XMLHttpRequest学习总结
weixin_64311421的博客
01-09 2757
XMLHttpRequest实例属性及实例方法
JS原生：XMLHttpRequest发送GET&POST请求
热门推荐
欢迎来到长风沛雨的博客
11-01 1万+
学到了xhr发起GET和POST请求，在此记录一下。
JS XMLHttpRequest对象详解
weixin_52148548的博客
05-09 9049
概念创建XMLHttpRequest对象建立连接发送get请求发送post请求异步响应状态readyState终止请求abort()获取XML数据获取和设置头部信息 概念 XMLHttpRequest对象，顾名思义：是基于XML的HTTP请求,是一个浏览器接口,XMLHttpRequest 用于在后台与服务器交换数据。 我们通过XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据。 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest().
JS/html/form/XMLHttpRequest Ajax 批量上传文件/图片的3种方式
快乐每一天
04-02 398
写在前面：后端选择你项目中使用的语言接收并处理图片。   由于上传图片都是以jQuery插件，为了纯js的崛起，遂选择ajax上传的方式，但在查找相关实例的时候着实困难重重，仅这个上传功能来回测试不下于2天的时间，最终还是执着战胜了困境。 以下3种方式都经多次测试通过。   重要说明： 第一种：切记：form -&gt; enctype="multipart/form-data" ...
前端文件上传3-1：使用xmlhttprequest上传图片（vue环境下）
胡世林的博客
11-01 1677
昨天试了下使用ajax去上传图片，试了下，还真的可以，也不难，就记下来，免得今后又忘记了直接上代码：先上布局代码：            上传图片接下来是js语言，也是比较简单，就直接上了：function v(){    var  file=document.getElementById("pictureupload").files[0];    var place="http://localh
xmlrequest多个文件同时上传
最新发布
07-31
XMLHttpRequest对象是用于与服务器进行交互的JavaScript API。它主要用于向服务器发送请求和接收响应。一般情况下，XMLHttpRequest对象只能发送和接收一个文件。但是，通过一些技巧和方法，我们可以实现同时上传多个文件。 一种常见的方法是通过FormData对象来实现多个文件的上传。FormData对象提供了一种将表单数据以键值对的形式发送到服务器的方式。我们可以向表单中添加文件输入框，用户可以选取多个文件。然后，通过JavaScript代码，我们可以遍历这些文件，将它们添加到FormData对象中。 接下来，我们可以使用XMLHttpRequest对象来发送FormData对象。通过调用XMLHttpRequest对象的open()方法和send()方法，我们可以将FormData对象发送给服务器。服务器收到数据后，可以通过服务器端的处理脚本来处理这些文件，并返回响应。 另外一种方法是使用第三方的JavaScript库，如jQuery或axios来处理多个文件上传。这些库封装了XMLHttpRequest对象的细节，并提供了更简单的方式来实现多个文件的上传。 在使用这些库时，我们只需要通过调用相应的方法来上传多个文件即可。这些方法会自动处理文件的上传和服务器的响应。例如，使用jQuery库时，我们可以使用$.ajax()方法来发送文件到服务器，并通过回调函数来处理服务器的响应。 综上所述，通过FormData对象和XMLHttpRequest对象，或者使用第三方的JavaScript库，我们可以实现同时上传多个文件。这些方法都可以根据具体的需求和情况进行选择和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值