我想用jQuery异步上传一个文件.这是我的HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

在这里我的__CODE__代码:

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

我只获取文件名,而不是上传文件.我该怎么做才能解决这个问题？

现行解决方案

我正在使用jQuery Form Plugin上传文件.

我可以使用以下jQuery代码使用Ajax请求的post方法执行文件上载吗？

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

如果可能,我是否需要填写"数据"部分？这是正确的方法吗？我只将文件发布到服务器端.

我一直在谷歌搜索,但我发现是一个插件,而在我的计划中,我不想使用它.至少目前.

我使用jQuery的ajax函数将文件发送到服务器端PHP脚本时遇到问题.可以获取文件列表$('#fileinput').attr('files')但是如何将此数据发送到服务器？使用文件输入时$_POST,服务器端php脚本上的结果array()为0(NULL).

我知道这是可能的(虽然我到目前为止还没有找到任何jQuery解决方案,只有Prototye代码(http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html) ).

这似乎是相对较新的,所以请不要通过XHR/Ajax提及文件上传,因为它肯定有用.

我需要Safari 5中的功能,FF和Chrome会很好但不是必需的.

我现在的代码是:

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

我正在尝试在我的项目中实现AJAX文件上传功能.我正在使用jQuery; 我的代码使用AJAX提交数据.我还想实现一个文件上传进度条.我怎样才能做到这一点？有没有办法计算已经上传了多少,以便我可以计算上传的百分比并创建一个进度条？

我正在尝试使用jquery和ajax上传图像.但这里发生了奇怪的事情.在控制台中记录其显示

TypeError:在没有实现接口FormData的对象上调用'append'.

请告诉我我在这里做错了什么？

JS脚本

var prosrc=$("#pro_pix img").last().attr("src");
$("#logoform").on('change',function(event){
var postData = new FormData(this);
$("#pro_pix img").last().hide();
$("#pro_pix img").first().show();
event.preventDefault();
$.ajax(
    {
        url : "/function/pro_pic_upload.php",
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR)
        {
        $("#pro_pix img").last().show();
        $("#pro_pix img").first().hide();
        $("#pro_pix h6").text(data);
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //if fails     
        }
    });
});

我的HTML标记

 <div class="row">
    <!-- left column -->
    <div id="pro_pix" class="col-md-4 col-sm-6 col-xs-12">
      <div class="text-center">
        <img src="template/image/725.GIF" class="avatar img-circle img-thumbnail" style="display:none" alt="avatar">
        <img src="<?php echo $rowuser['profile_logo']; ?>" class="avatar img-circle img-thumbnail" alt="avatar">
        <h6>Upload …

我一直在寻找一些帮助来制作一个组件来帮助管理从React内部上传文件到我设置的端点.

我尝试过很多选项,包括整合http://filedropjs.org.我决定反对它,因为我无法控制它在DOM中设置的元素new FileDrop('zone', options);

这是我到目前为止:

module.exports =  React.createClass({
displayName: "Upload",
handleChange: function(e){

    formData = this.refs.uploadForm.getDOMNode();

    jQuery.ajax({
        url: 'http://example.com',
        type : 'POST',
        xhr: function(){
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
            }
            return myXhr;
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            alert(data);
        }
    });

},
render: function(){

        return (
            <form ref="uploadForm" className="uploader" encType="multipart/form-data" onChange={this.handleChange}>
                <input ref="file" type="file" name="file" className="upload-file"/>
            </form>
        );
   }

 });



},
render: function(){

    console.log(this.props.content);

    if(this.props.content != ""){
        return (
            <img src={this.props.content} …

我在模板中使用了这样的东西

<select multiple="multiple"  name="services" id="services" size="5">
    {% for service in services %}
        <option value="{{service.id}}">{{service}}</option>
    {% endfor %}
</select>

当我在Firebug或Django调试中查看POST数据时,我发现它只发送一个值.我做错了什么或误解了一个概念？

Q.1我想将此表单转换为ajax但似乎我的ajax代码缺少某些东西.提交时根本不做任何事情.

Q2.我还希望在选择文件时不要等待提交时触发更改.

这是JS.

$('#imageUploadForm').on('submit',(function(e) {
    e.preventDefault()
    $.ajax({
        type:'POST',
        url: $(this).attr('action'),
        data:$(this).serialize(),
        cache:false
    });
}));

和PHP的HTMl.

<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
    <input type="file" style="widows:0; height:0" id="ImageBrowse" hidden="hidden" name="image" size="30"/>
    <input type="submit" name="upload" value="Upload" />
    <img width="100" style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/>
</form>

有可能的!参见下文.

首先,让我使用此图解释如何实现异步文件上传:

抱歉.我关闭了我的一个域名,图像现在已经消失了.这是一个非常好的形象.这是在我发现Stack Overflow允许通过Imgur上传图像之前.

正如您所看到的,诀窍是让HTTP响应加载到隐藏的IFRAME元素而不是页面本身.(这是通过target在使用JavaScript提交FORM时设置FORM元素的属性来完成的.)

这有效.但是,我面临的问题是服务器端脚本位于不同的域上.FORM-submit是一个跨域HTTP请求.现在,服务器端脚本启用了CORS,这使我的网页有权读取从我的页面到该脚本发出的HTTP请求的响应数据 - 但这只有在我通过Ajax接收HTTP响应时才有效, ergo,JavaScript.

但是,在这种情况下,响应指向IFRAME元素.一旦XML响应进入IFRAME,其URL将是删除脚本 - 例如http://remote-domain.com/script.pl.

不幸的是,CORS没有涵盖这种情况(至少我认为) - 我无法读取IFRAME的内容,因为它的URL与页面的URL(不同的域)不匹配.我收到此错误:

不安全的JavaScript尝试使用URL hxxp://my-domain.com/outer.html从具有URL hxxp://remote-domain.com/script.pl的框架访问框架.域,协议和端口必须匹配.

由于IFRAME的内容是一个XML文档,因此IFRAME中没有可以使用的JavaScript代码postMessage.

所以我的问题是:如何从IFRAME获取XML内容？

正如我上面所说,我能够直接检索跨域HTTP响应(启用CORS),但似乎我无法在加载到IFRAME后读取跨域HTTP响应.

好像这个问题不够无法解决,让我排除这些解决方案:

1. easyXDM和类似技术需要远程域上的端点,

2. 改变XML响应(包括SCRIPT元素),

3. 服务器端代理 - 我知道我的域可以有一个服务器端脚本,可以作为代理.

那么,除了这两个解决方案,这可以做到吗？

可以办到!!

事实证明,可以伪造一个模仿multipart/form-dataFORM提交的XHR请求(Ajax请求)(在上面的图像中用于将文件上传到服务器).

诀窍是使用FormData构造函数 - 阅读此Mozilla Hacks文章以获取更多信息.

这是你如何做到的:

// STEP 1
// retrieve a reference to the file
// <input type="file"> elements have a "files" property
var file = input.files[0];

// STEP 2
// …

我有一个HTML表单,需要在一个请求中将3个部分上传到现有的REST API.我似乎无法找到有关如何在FormData提交上设置边界的文档.

我试图按照这里给出的示例: 如何在jQuery中使用Ajax请求发送FormData对象？

但是,当我提交数据时,它会被以下堆栈跟踪拒绝:

Caused by: org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found.

我该如何设置边界？

这是HTML/Javascript:

   <script type="text/javascript">
    function handleSubmit() {


        var jsonString = "{" +
                "\"userId\":\"" + document.formSubmit.userId.value + "\"" +
                ",\"locale\":\"" + document.formSubmit.locale.value + "\"" +
                "}";

        var data = new FormData();
        data.append('Json',jsonString);
        data.append('frontImage', document.formSubmit.frontImage.files[0]);
        data.append('backImage', document.formSubmit.backImage.files[0]);

        document.getElementById("sent").innerHTML = jsonString;
        document.getElementById("results").innerHTML = "";
        $.ajax({
                   url:getFileSubmitUrl(),
                   data:data,
                   cache: false,
                   processData: false,
                   contentType: 'multipart/form-data',
                   type:'POST',
                   success:function (data, status, req) {
                       handleResults(req);
                   },
                   error:function (req, status, error) …