<!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);

JQ Ajax 上传文件的更多相关文章

  1. models渲染字典&form表单上传文件&ajax上传文件

    {# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...

  2. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  3. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  4. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  5. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  6. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  7. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  8. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  9. 闲话ajax，例ajax轮询，ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

随机推荐

  1. Solidworks的Toolbox拖出来的零件另存也没用，重新打开之后被自动替换怎么办

    工具-选项-系统选项-异型孔向导,取消勾选"将此文件夹设为Toolbox零部件的默认搜索位置"   这样把Toolbox的零部件另存之后,就可以修改,比如添加草图和特征,然后另存之 ...

  2. Android app启动耗时分析

    前言 app启动耗时过长的话,无论你的app里面的内容多么丰富有趣,作为一个用户,首先是没有耐心去等待的,如果我是一个用户,我会这样想:这是什么垃圾公司出的什么烂app,再等2s不进来就卸载,黑人问号 ...

  3. 读-《c++设计新思维-泛型编程与设计模式之应用》经典记录（英文书名：《modern c++ design》）

    1.以设计为目标的程序库都必须帮助使用者完毕静止的设计.以实现使用者自己的constraints,而不是实现预先定义好的constraints. 2.Anything that can be done ...

  4. 3、jQuery的DOM基础

    DOM模型在页面文档中,通过树状模型展示页面的元素和内容,其展示的方式则是通过节点(node)来实现的. 3.1 访问元素 3.1.1 元素属性操作 Attr()可以对元素属性执行获取和设置操作,而r ...

  5. 使用 Gradle 实现一套代码开发多个应用

    代码地址如下:http://www.demodashi.com/demo/11297.html 在文章 使用 Gradle 对应用进行个性化定制 中,我们能够针对一个应用的正式服.测试服.超管服等其他 ...

  6. 【PHP】组合条件搜索SQL

    前端html多个搜索条件组合 后台一个sql语句,很方便和简洁:仅提供思路. 也可以配合着进行分页操作,非常赞~

  7. RS：推荐系统中的数据稀疏和冷启动问题

    如何在没有大量用户数据的情况下设计个性化推荐系统并且让用户对推荐结果满意从而愿意使用推荐系统,就是冷启动问题. 冷启动问题主要分为三类: (1) 用户冷启动:如何给新用户做个性化推荐的问题,新用户刚使 ...

  8. 【转载】C#根据当前时间获取周，月，季度，年度等时间段的起止时间

    DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.AddDays(1 - Convert.ToInt32(dt.DayOfWeek. ...

  9. 基于DDD的现代ASP.NET开发框架--ABP系列之1、ABP总体介绍

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之1.ABP总体介绍 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  10. phpexcel 读取日期的问题？

    phpexcel 读取excel数字时,显示为一串数字(时间都是类似于这样的数字:41890.620138889),如何将数字转换为对应的日期来显示呢?特别是例如星期一这种的时间. 可以用phpexc ...