相关疑难解决方法(0)

我想用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上传文件.

的XMLHttpRequest的2级标准(还是工作草案)定义FormData的接口.此接口允许将File对象附加到XHR请求(Ajax请求).

顺便说一句,这是一个新功能 - 在过去,使用了"隐藏iframe技巧"(在我的另一个问题中阅读).

这就是它的工作原理(例子):

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

where input是一个<input type="file">字段,handler是Ajax请求的成功处理程序.

这在所有浏览器中都很漂亮(除了IE之外).

现在,我想使这个功能与jQuery一起使用.我试过这个:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

不幸的是,这不起作用(抛出"非法调用"错误 - 截图在这里).我假设jQuery需要一个表示form-field-names/values的简单键值对象,而FormData我传入的实例显然是不兼容的.

现在,由于可以将FormData实例传入xhr.send(),我希望它也可以使它与jQuery一起使用.

更新:

我在jQuery的Bug Tracker上创建了一个"功能票".它在这里:http://bugs.jquery.com/ticket/9995

我被建议使用"Ajax prefilter"...... …

我有一个方法;

@POST
@Path("test")
@Consumes(MediaType.APPLICATION_JSON)
public void test(ObjectOne objectOne, ObjectTwo objectTwo)

现在我知道我可以用json格式发布一个对象,只需将它放入体内即可.但是可以做多个对象吗？如果是这样,怎么样？

我一直在尝试使用enctype ="multipart/form-data"提交表单.我有这个设置,因为一旦我找到了文本输入的ajax提交,表单将涉及jpeg/png上传.

1. 使用表单html中的操作引用脚本时,php工作正常.

2. 表单数据似乎由以下jquery正确检索,因为警报行显示:productName = Test + Name&productDescription = Test + Description&OtherProductDetails =

3. 由jquery成功函数打印到我的HTML的返回数据是一个php错误说:Undefined index:productName

4. 删除contentType:false可修复问题.

当我谷歌jquery/ajax multipart/form-data提交时,热门点击至少主要包括'contentType:false'.请有人向我解释原因吗？

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajax http://hayageek.com/jquery-ajax-form-submit/ 使用jQuery.ajax发送multipart/formdata

jquery API文档说:contentType(默认值:'application/x-www-form-urlencoded; charset = UTF-8')类型:字符串将数据发送到服务器时,请使用此内容类型.

为什么我们需要为multipart/form-data提交将其设置为false？什么时候需要虚假设置？

jQuery的:

  $("#addProductForm").submit(function (event) {
      event.preventDefault();
      //grab all form data  
      var formData = $(this).serialize();

      $.ajax({
          url: 'addProduct.php',
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
              $("#productFormOutput").html(returndata);
              alert(formData);
          },
          error: function () {
              alert("error in ajax form submission");
          }
      });

      return false;
  });

我不知道为什么我不能让jQuery传递上传数据,因为AJAX对象似乎配置正确,并且正在发送正确的Content-Type/MIME-Type标头.

我尝试了两种不同形式的请求 - 一种是在文字中包含FormData对象,另一种是直接传递FormData对象.

不幸的是,无论哪种方式我都无法通过,$ _FILES和$ _POST都是空数组.

我想要使​​用的理想要求如下:

以下代码:

var files = new FormData();

$.each(context.prototype.fileData, function(i, obj) { files.append(i, obj.value.files[0]); });

var request = { action: 'upload', id: response.obj.id, data: files };

$.ajax({

    type        : 'POST',
    url         : context.controller,
    data        : request,
    processData : false,
    contentType : 'multipart/form-data',
    mimeType    : 'multipart/form-data',

    success     : function(r) {
        console.log(r);
        //if (errors != null) { } else context.close();

    },

    error       : function(r) { alert('jQuery Error'); }

});

当我尝试导出$ _FILES和$ _POST时,唯一的响应(查看网络选项卡和控制台)只是两个空数组......

我在MVC 4.5 WebApi项目中收到500内部服务器错误.我可以通过GET和带有Id​​的GET成功调用我的web服务.但是,当我发布文件时,我收到错误.我可以设置一个断点Application_BeginRequest()并确认我先收到一个OPTIONS请求,然后是POST.控制器中的方法没有被调用,我已经Application_Error()向Global.asax.cs 添加了一个方法,它也没有被命中.html页面正在执行CORS,但我已经使用ThinkTecture.IdentityModel处理了它.我在这里关注文件上传的代码.

有任何想法吗？

这是客户端代码:

    <script type="text/javascript">
        var UploadDocument = function () {
            var url = sessionStorage.getItem("url");
            var auth = sessionStorage.getItem("auth");
            var data = new FormData();

            jQuery.each($('#fileToUpload')[0].files, function (i, file) {
                data.append('file-' + i, file);
            });

            jQuery.support.cors = true;
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                cache: false,
                processData: false,
                contentType: false,
                //dataType: "json",
                headers: { Authorization: 'Basic ' + auth },
                crossDomain: true,
                success: function (data, textStatus, jqXHR) {
                    alert('Success'); …

我写了一个脚本,通过拖放使用jQuery上传文件,jQuery在drop上读取文件并将其添加到文件数组中,如下所示:

var files = [];

$(document).ready(function() {
    jQuery.fn.dropbox = function(config) {
        var dragging = 0;
        var dragEnter = function(e) {
            e.stopPropagation();
            e.preventDefault();
            dragging++;
            $(".external-drop-indicator").fadeIn();
            $(".toast.toast-success").fadeIn().css("display", "inline-block");;
            return false;
        };
        var dragOver = function(e) {
            e.stopPropagation();
            e.preventDefault();
            return false;
        };
        var dragLeave = function(e) {
            e.stopPropagation();
            e.preventDefault();
            dragging--;
            if(dragging === 0) {
                $(".external-drop-indicator").fadeOut();
                $(".toast.toast-success").fadeOut();
            }
            return false;
        };
        var drop = function(e) {
            var dt = e.dataTransfer;
            var files_upload = dt.files;

            e.stopPropagation();
            e.preventDefault();

            if(files_upload && files_upload.length > 0 && config.onDrop !== …

我有一个具有文件上传字段的表单页面,我试图以编程方式设置该字段的值,虽然我知道由于安全原因它是不可能的,但我想知道我们是否仍然可以？如果有插件或我可以用来执行上传的东西.我有设置该字段所需的文件字段的Base64值,我需要知道的是有没有办法设置它.

在这方面,任何建议或帮助都会很棒.

谢谢.

更新: 添加了一个JsFiddle来演示我正在尝试的内容.

请访问此网站,使用js小提琴中的示例创建一个文本文件,并使用此链接进行转换.

var str = `text`;

http://www.motobit.com/util/base64-decoder-encoder.asp

的jsfiddle

注意:

下面的答案反映了2009年遗留浏览器的状态.现在,您可以在2017年使用JavaScript动态/编程地设置文件输入元素的值.

有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？

这是一种append提交方式FormData:

  var data = new FormData();
  jQuery.each($('#file')[0].files, function(i, file) {
          data.append('file-'+i, file);
  });

可以这样做吗？

     data[i].remove();???
 or  data[i] = file;??

如何iIcan从中删除或修改值 data

我正在开发一个项目,我使用Rgraph PHP库实现了几个图形/图表.在我的脚本中,我为图表执行以下操作:

1. 计算图形点并使用Rgraph Draw()方法绘制图形.
2. 使用该canvas.toDataURL()方法创建图像数据变量.
3. 使用jQuery AJAX $.post()方法将此图像数据变量传递给服务器.
4. 通过PHP脚本将图像保存到服务器.

此解决方案中的所有内容在我的localhost上运行良好,但是在开发服务器上,传递图像数据的AJAX请求返回a 403 Error.

我在客户端和服务器端都记录了数据以确定问题.客户端日志记录确认传递的imageData变量看起来正确.但是,服务器端日志记录确认传递的imageData变量是导致问题的原因.

去年有一个非常类似的问题,但他们无法确定这个问题的根本原因.任何人都可以帮我指出解决这个问题的正确方向吗？

我认为这是一个可能的数据编码问题,但如果是这种情况,为什么它在一台服务器而不是另一台服务器上运行？

我的相关Javascript:

radar.Set('chart.contextmenu', [
     ['Get PNG', RGraph.showPNG],
     null,
     ['Cancel', function () {}]
]);

radar.Draw();   

var imageData = radar.canvas.toDataURL("image/png");

console.log('imageData: ' + imageData);
console.log('filename: ' + 'tmpRadar<?php echo $us['UsersSurvey']['user_id']; ?>-<?php echo $survey['Survey']['id']; ?>.png');

$.post("/Surveys/save_chart", { 
    src     : imageData, 
    filename: 'tmpRadar<?php echo $us['UsersSurvey']['user_id']; ?>-<?php echo $survey['Survey']['id']; ?>.png'
});

客户端记录:

imageData: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAOECAYAAACxbcj6AAAgAElEQ…AgQIAAgVECAqxR49YsAQIECBAgQIAAAQIECBAgQKCfwP8CXHJ+WDHVMbcAAAAASUVORK5CYII=
filename: tmpRadar19-1.png
POST http://website.com/Surveys/save_chart 403 (Forbidden) …