JQ Ajax 上传文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FormData</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
</head>
<body>
<style>
    #feedback{width:1200px;margin:0 auto;}
    #feedback img{float:left;width:300px;height:300px;}
</style>
<div>
    <!-- 点击图片添加文件方式 -->
    <img src="http://f7-preview.awardspace.com/zjmainstay.co.cc/jQueryExample/jquery_upload_image/files/addfile.jpg" onclick="getElementById(‘inputfile‘).click()" title="点击添加图片" alt="点击添加图片">
    <input type="file" name="image" style="opacity:0;filter:alpha(opacity=0);" id="inputfile"/>
</div>
<div id="feedback"></div>    <!-- 响应返回数据容器 -->
<script type="text/javascript">
$(document).ready(function(){
    $("#inputfile").change(function(){
        //创建FormData对象
        var data = new FormData();
        //为FormData对象添加数据
        //
        $.each($(‘#inputfile‘)[0].files, function(i, file) {
            data.append(‘upload_file‘, file);
        });
        $.ajax({
            url:‘submit_form_process.php‘,
            type:‘POST‘,
            data:data,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            success:function(data){
                data = $(data).html();
                if($("#feedback").children(‘img‘).length == 0) $("#feedback").append(data.replace(/&lt;/g,‘<‘).replace(/&gt;/g,‘>‘));
                else $("#feedback").children(‘img‘).eq(0).before(data.replace(/&lt;/g,‘<‘).replace(/&gt;/g,‘>‘));
            }
        });
    });
});
</script>
</body>
</html>

特别的:contentType: false,
            processData: false,

这两个参数是必须的。

缺少contentType: false,$_FILES值为空。

缺少processData: false,FF控制台报错:“NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object”,直接不能运行。

后台:var_dump($_FILSE);

时间: 2024-08-25 09:05:52

JQ Ajax 上传文件的相关文章

使用ajax上传文件

有时候我们需要在web端向服务器上传文件,以前是使用form的方式进行提交,html5中支持直接使用xmlhttprequest上传文件,send对象支持blob对象而文件就是一个blob对象 ajax上传文件 ajax中可以通过参数processData这个参数来控制data是否进行转换,我们将这个参数设置为false就可以使用ajax进行文件的上传操作了 example: $.ajax({ url: "your url", type: "POST", proce

闲话ajax,例ajax轮询,ajax上传文件

引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放假,赶紧补上吧! ajax的出现,可以出给用户带来了很好的体验,证据如下: 1.感觉:以前要给用户呈现新的内容,就必须要刷新当前页面,结果往往是这样:用户看着看着,唰...,然后又重头看起,我那个去,这谁受得了; 自从有了ajax后,就是这样的,用户关注哪一块,变化哪一块,我们就更新那一块,完全看不

ajax上传文件

以往我用的上传文件都是Flex写的,最近html页面需要上传页面功能. 相比之下,比flex还是要麻烦一些,问题也多一些.这里记录下: ajax上传文件,我用到了ajaxfileupload.js修正版. <form id="addAttaForm" enctype="multipart/form-data"> <div class="row"> <label for="fileUpload"&g

【原创】AJAX上传文件,formdata表单提交问题

今天遇到一个特别神奇的问题,AJAX上传文件,formdata表单提交问题,后台显示无法获取上传文件. 排查许久发现是formdata.append();时,要先添加file,而后添加其他参数.方可正常工作. 可是却不知到底是和原因.去了火狐开发者社区也未能找到答案. 还望知道的大神赐教一二.

atitit.ajax上传文件的实现原理 与设计

atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直接实现上传文件 1 2.1. 传统的实现方式iframe 2 2.2. html5转码base64 3 2.3. 其它插件FLASH的实现原理 3 3. 上传进度的实现原理 3 3.1. 使用ajax结合服务端的进度返回,比較麻烦 4 4. 本地预览的解决 4 4.1. 用HTML5上传文件 4 5

springMVC+jsp+ajax上传文件

工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method="post" > 登录名<input type="text" name="loginName" /> <br> 上传录音<input type="file" name="record

使用html5特性--ajax上传文件

在html5以前,ajax上传文件算是一个比较麻烦的事,要是想显示一下上传进度就更不容易.遇到这种情况往往需要借助于第三方插件,比如jquery.fileupload.js.如今html5已经技术已经变成一个非常流行.非常新潮的技术了,各个浏览器厂商也实现了不少的html5规范,如今文件上传有了html5的支持已经变的相当容易了,我自己尝试了一下用javascript原生的api来实现ajax上传文件,为了页面不至于太丑,我使用了bootstrap的一些组件,先上效果图: 实现的功能介绍: aj

用iFrame模拟Ajax上传文件

前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法也有利用flash的.flash确实是个好方法 但是不是每个人都会flash的而且下载下来现成的方法要做修改也不是件易事,且文件相对较大.最后只好模拟iframe来实现.发现相当的简单.泌阳县马奇建材 html: <iframe name="ajaxUpload" style=&qu

Ajax上传文件进度条显示

要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显示,就可以 实现上传的进度条效果 前端页面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax上传文件进度条显示