当前位置：文江博客话题详情

ajax+input上传前端图片

发布于 2022-09-03 07:46:54 字数 437 浏览 22 评论 0

图片描述

图片描述
请教各位大神，我用postman上传图片成功了，js怎么写，我按截屏所示写的，但是什么都不会返回，请问我ajax这里是不是写错了？应该怎么写呢？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回眸一遍 2022-09-10 07:46:54

不太清楚你的jquery是否用了什么插件，从$.ajax的api描述中看，我并没有看到files属性，按照我的理解，得是一个封装的FormData，然后赋值给data属性：

图片描述

然后，根据data的描述，需要配合processData属性：

图片描述

注意我选中部分，人家说了，当想发送一个DOMDocument对象，或者其他类型的数据时，得设置成false。

图片描述

然后，contentType按照文档描述，是不是也得设置成false？

最后建议你看看update-file

或者直接使用插件:jquery-file-upload

回复收藏 0

怼怹恏 2022-09-10 07:46:54

用了这么多年的$.ajax, 也没发现有files这个参数, 特意去官方api https://api.jquery.com/jQuery.ajax/ 查了一圈也没发现这个参数, 这是谁教你的?

var formData = new FormData($("#uploadForm")[0]);  
 $.ajax({  
      url: uploadUrl,  
      type: 'POST',  
      data: formData,  
      success: function (data) {  
          console.log(data);  
      },  
      error: function (data) {  
          console.log(data);  
      }  
 });

浏览器兼容,ie9及以上

回复收藏 0

多谢你的绝情让我学会死心 2022-09-10 07:46:54

老旧的浏览器(比如IE8)不支持FormData,所以只能用传统的form表单上传.
用form+iframe模拟AJAX异步上传:
form的target设为页面内的一个iframe,让这个iframe显示action请求后的内容.

upload.php
<?php
if(isset($_POST['submit']) && !empty($_FILES['file'])) {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
    header('Content-Type: text/html; charset=utf-8');
    echo '<style>* {padding: 0;margin: 0;}</style>';
    echo '<img src="uploads/'.$_FILES['file']['name'].'" width="100%" height="100px"/>';
    exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery "AJAX" upload</title>
<style>
* { margin: 0; padding: 0; }
#con { width: 360px; margin: 10px; }
input { display: block; margin: 10px; }
</style>
</head>
<body>
<div id="con">
    <h1>Hello LAMP</h1>
    <form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post" enctype="multipart/form-data" target="ul_frame">
        <input type="file"   name="file" class="file" />
        <input type="submit" name="submit" value="上传" class="submit" />
        <iframe name="ul_frame" class="ul_frame" src="" frameborder=0 scrolling="no"
         style="display:none;border:1px solid #AAAAAB;width:100px;height:100px;"></iframe>
    </form>
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
    $('input.submit').click(function(){
        $('iframe.ul_frame').show();
    });
});
</script>
</body>
</html>

回复收藏 0

~没有更多了~