美文网首页
Ajax实现无刷新上传图片

Ajax实现无刷新上传图片

作者: 驴得氺 | 来源:发表于2017-01-18 19:25 被阅读0次

一: 表单部分:

    <form id="form1">  
         姓名:<input type="text" name="name" />
         照片:<input type="file" name="photo" />
         <input type="button" name="b1" value="submit" onclick="fsubmit()"> 
     </form>

二: js部分(需引入jquery库)

<script type="text/javascript">  
        function fsubmit(){  
            var data = new FormData($('#form1')[0]);  
            $.ajax({  
                url: '2.php',  //处理图片文件
                type: 'POST',  
                data: data,  
                dataType: 'JSON',
                cache: false,  
                processData: false,  
                contentType: false  
            }).done(function(ret){  
                if(ret){  
                    alert(ret); //成功执行,可替换其他业务逻辑
                }else{  
                    alert(ret);  //失败执行
                }  
            });  
            return false;  
        }  
      </script>

三: 2.php文件后台处理图片

<?php  
//接收其他文本数据
$name = isset($_POST['name'])? $_POST['name'] : '';  
//图片名
$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));  
//保存路径
$path = './img/'.$filename;
if(move_uploaded_file($_FILES['photo']['tmp_name'], $path)){  
    $response = '成功';  
}else{  
    $response = '失败';  
}  
echo json_encode($response);

结束!!!

相关文章

  • Ajax实现无刷新上传图片

    一: 表单部分: 二: js部分(需引入jquery库) 三: 2.php文件后台处理图片 结束!!!

  • 图片上传并回显Ajax异步篇

    图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图...

  • Ajax上传图片,后台使用SpringBoot的Multipar

    Ajax很好用,但是在上传文件这边却总是会出问题。例如,现在想上传一张图片,希望前台无刷新操作,使用Ajax上传,...

  • 二十、PHP图片上传

    index.php Ajax+PHP实现异步图片上传

  • Ajax+php 无刷新上传图片功能

    ε=(・д・`*)ハァ… 简单而粗暴的无刷新上传图片,前端效果如下面: 亲测可以上传图片: (^-^)那就不多废...

  • 无刷新上传图片

    https://www.helloweba.net/javascript/189.html

  • 2018-03-19

    php 和 ajax 实现无刷新添加购物车kkpl

  • Ajax无刷新图片插件使用

    无刷新文件上传 使用jquery插件plupload实现无刷新文件上传 官网: https://www.plupl...

  • js-图片上传

    需求:单独上传图片和多图上传实现一:使用原生ajax来完成 1、html代码界面提交按钮 2、js代码 实现二:使...

  • HTML5-History API

    History接口允许操作浏览器的历史会话记录,可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。...

网友评论

      本文标题:Ajax实现无刷新上传图片

      本文链接:https://www.haomeiwen.com/subject/kwjbbttx.html