关注这篇文章,我有另一个发行者 - 当我点击文本链接时,如何在输入中触发浏览文件？

基本上我想隐藏表单,但是当你点击上传文本链接时会触发它.

<a href="#" class="upload">upload</a>
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm" style="display:none;">
  <input type="file" multiple="multiple" name="file[]" />
  <input type="submit" name="upload" value="Submit"/>
</form>
<div id="output"></div>

这是我正在使用的Javascript代码:

$(document).ready(function(){
    $('.upload').click(function(){
        $(this).trigger($('input[type=file]'));
        return false;
    });

    $('input[type=file]').change(function() {
        $('#myForm').ajaxSubmit({
               target: '#output'
        });
    });
});

我有一个表单我使用来自Forms插件的jQuery的ajaxSubmit函数提交.我正在尝试在提交之前向表单数据添加表单名称/值对.我的计划是修改beforeSubmit事件处理程序中的表单数据.

给定一个看起来像这样的函数:

function handleActionFormBeforeSubmit(formData, form, options) {
    // Add a name/value pair here somehow to formData
}

如何向formData添加简单对？它是以下形式的数组:

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

谢谢,Brian

我正在尝试创建一个进度条向用户显示上传了多少文件,我使用的是ajaxSubmit和uploadprogress函数,但是这个函数不会更新它只是给了我100,就是这样:

这是我的JS代码:

  function UploadImage(){
$('#new-post-upload-images').ajaxSubmit({
  dataType: "json",
  beforeSend: function(a,f,o) {
    $('input.images').unwrap().css('display','none');
    $('#new_post_overlay,#upload_plus,#upload_wrapper .edit-menu-post').remove();
    $(".new_post_btn").attr('disabled', true);
    $(".load_new_post").show();
  },
  uploadProgress: function(event, position, total, percentComplete) {
    console.log(percentComplete + '%');
  },
  complete: function(XMLHttpRequest, textStatus) {
    var data= XMLHttpRequest.responseText;
    var jsonResponse = JSON.parse(data);
    $(".load_new_post").hide();
    $('#new_post_wrapper').append('<div class="edit-menu-post"><a class="delete dismiss_image dismiss icon-cancel" title="Remove"><span>Delete</span></a><a class="repos-drag icon-drag" title="Reposition"><span>Reposition</span></a></div><div style="width:100%;height:100%;background-repeat: no-repeat;background-size: cover;position: relative;" id="preview"></div>').parent().find('.bg-port').val('0px 0px');
    $('#preview').css('background-position', '0 0').css('background-image', 'url(' + jsonResponse[0]["path"] + ')');
    var ids = $.map(jsonResponse, function(n){
      return n["id"];
    });
    $('#uploaded_images_ids').val(ids.join("#"));
    $(".new_post_btn").attr('disabled', false);
  }
});

}

这是我的Ruby和HTML代码: …

我正在使用jQuery Form Plugin和multer将文件上传到我的服务器.这工作正常,但我试图传递一个额外的参数,这将确定文件的确切位置.

我有以下代码,我想扩展为行为如上所述:

HTML

<form id="uploadForm"
      enctype="multipart/form-data"
      action="/files"
      method="post">
    <input type="file" id="userFile" name="userFile"/>
    <input type="text" hidden id="savePath" name="savePath" value="path"/>
</form>

客户端JS

uploadForm.submit(function() {
    $(this).ajaxSubmit({

        error: function(xhr) {
            console.log('Error: ' + xhr.status);
        },

        success: function(response) {
            console.log('Success: ' + response);
        }
    });

    return false;
});

Node.js路由

app.post(APIpath + "file",function(req,res){
    var storage = multer.diskStorage({
        destination: absoluteServePath+ "/" + config.filePath,
        filename: function (req, file, cb) {
            cb(null, file.originalname);
        }
    });
    var upload = multer({ storage : storage}).any();

    upload(req,res,function(err) …

我在使用jQuery Form Plugin与文件上传字段正常工作时遇到了一些麻烦.当我使用插件提交没有文件上传字段的表单format.json时,respond_to do |format|块的部分被正确调用.但是,通过添加文件上载字段,它只执行format.html使我的javascript代码认为发生了错误的部分.

有没有人遇到这个或知道一种方法来强制插件总是使用json？或者,我可以修改插件用来强制Rails渲染json的url吗？

非常感谢您的帮助!代码如下:

# app/controllers/details_controller.rb
def create
  @detail = Detail.new(params[:detail])

  style = params[:detail_style].to_sym || :thumb
  data = { :id => '5', :url => 'test.rails' }

  respond_to do |format|
    if @detail.save
      flash[:notice] = 'Your image has been saved.'
      data = { :id => @detail.id, :url => @detail.data.url(style) }

      format.html { redirect_to :action => 'index' }
      format.json { render :json => "<textarea>#{data.to_json}</textarea>", :status => :created }
    else
      format.html { render …

我正在重构我使用$.ajaxjQuery 表单插件提交表单的用法。该API的状态，有可能通过任何传递给选项$.ajax来$.ajaxSubmit。我希望修改 中的选项对象beforeSubmit，添加一个data属性。警告options.beforeSubmitin的值processSubmit表明这是由处理程序初始化的选项对象，并且数据已设置，但由于选项对象已经在没有data属性的情况下进行了初始化，因此它不包含在发送到服务器的帖子中。是否可以在 中beforeSubmit或以其他方式修改选项对象？

当文档准备好时，我将一个处理程序绑定到submit()：

$("#myform").submit(function() {
    var options = { dataType: 'json',
            beforeSubmit: processSubmit,
            success: endSubmit };
    $(this).ajaxSubmit(options);
    return false;
});

该processSubmit(arr, $form, options)函数将要发送到服务器的数据打包为 JSON：

function processSubmit(arr, $form, options) {
    var followers =[];
    $($("#follower-multi-select").children().filter("li")).each(function() {
      if ($(this).hasClass("selected")) {
        var fwr =  $(this).attr("id");
        followers.push(fwr);
      }
    });

    var postData = { followers : followers };
    alert('beforeSubmit is: …

背景

我想提交一份表格,留在同一页面上并获得回复.

下面提到的代码在Chrome,Safari和Firefox中完美运行.但它在IE10中不起作用.

如何使它在IE10中工作？

我的分析正确性="有问题"

在IE10中,$('#amazonUpload').ajaxSubmit(options)执行,但是在服务器上没有收到Ajax请求,因此在客户端永远不会收到响应.

HTML

<form action="https://s3.amazonaws.com/adminportal" enctype="multipart/form-data" id="amazonUpload" method="post">   
    <input name="key" type="hidden" value="001e0000009vkRLAAY/Forms/${filename}" />             
    <input name="AWSAccessKeyId" type="hidden" value="client aws key" /> 
    <input name="policy" type="hidden" value="really long string" /> 
    <input name="signature" type="hidden" value="sign value=" />             
    <input name="acl" type="hidden" value="private" /> 
    <input name="Content-Type" type="hidden" value="application/octet-stream"/>
    <div id="uploadPage:block:j_id31"><div class="pbSubsection">      
    <input id="uploadfileOne" name="file" required="True" size="25" type="file" />
    <input class="btn" id="myBtnId55" name="myBtnId55" onclick="uploadActComplete();" style="display:none;" type="button" value="Upload" />     
</form>

JavaScript的

function uploadActComplete(){
    loading();     
    var options = { 
    //      error: errorResponse,
    // …

请帮帮忙,这个是一个主要的BLOCKER!

我有一个使用NodeJS + jQuery Form Plugin + Typescript的项目,我正在尝试上传文件.文件上传后,服务器会向POST消息发送响应,该消息在屏幕上呈现.在POST响应呈现在屏幕上之前,文件确实已成功上传.我希望POST响应调用"成功"函数,而不是重定向页面以显示JSON响应.

这是代码:

$(new ID().setAsRoot().selectId()).append(
    "<form id=\"fileUploadForm\" accept-charset=\"utf-8\" method=\"post\" action=\"/upload\" enctype=\"multipart/form-data\">" +
        "<input id = \"filename\" type=\"file\" name=\"userfile\" multiple=\"multiple\" />" +
        "<button type=\"submit\" id = \"submitButton\"> Upload </button></form>");

var form = $("#fileUploadForm");
form.submit(function (e) {
    //e.preventDefault();
    this.ajaxSubmit({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success: function (data) {
            var x = JSON.parse(data);
            alert("Success : " + x);
        },
        error: function (data) {
            var x = JSON.parse(data);
            alert("Error : " + x);
        }
    });
});

不会调用success函数(这意味着警报消息不会显示).JSON数据只是在屏幕上呈现如下: …

我正在编写一个表单,当更改选择列表时,会动态加载一些文本输入元素.

问题是,当我提交表单时,这些元素不会发布到发布到服务器的数据中.

我需要做些什么才能将这些动态创建的元素"放入"要提交的表单中？

代码是这样的:

$("#my_select_id").change(function() {
    $.ajax({
        type: "GET",
        url: "some-url/" + $("#played_number_game_id").children("option:selected").val(),
        async: false, 
        dataType: "html",
        error: function(XMLHttpRequest, status, errorThrown) {
            alert("oh no!");
            alert(status);
        },
        success: function (data, status) {
            $("#parent-element").html("");
            $("#parent-element").append(data);
        },
        complete: function() {
        }
    });

    $("#my_form_submit").click(function() {
        $("#my-form").ajaxSubmit({ clearForm: true }); 
        return false;
    });
});

ajax调用返回的html是:

<input id="my-form_e_1" class="number-input" type="text"/>
<input id="my-form_e_2" class="number-input" type="text"/>

如果我在调用ajax方法后使用firebug查看页面,动态加载的html就在层次结构中,它应该是...即它在表单中.

但是当我单击提交按钮时,只会发布ajax调用之前存在的表单元素.

有任何想法吗？

当我没有选择任何文件进行上传时,没有问题,当我只填写其他输入而不是帖子形式时,它正在工作.但是当我选择一个文件进行图片上传而不是发布时,我收到了这个错误,但是当我查看文件夹时,我看到该文件已上传.但是javascript失败了.

jquery.form.js:357 Uncaught TypeError: 
Object function (a,b){return new d.fn.init(a,b,g)} has no method 'handleError'

这是我的代码,

<form id="employeeaddform" class = "classform" enctype="multipart/form-data" action="inc/employeeadd.php"  method="post">
        <p><input type="file" size="32" name="my_field" value="" /></p>
        <p class="button"><input type="hidden" name="action" value="image" />

        <label for="nname">Personal Name : </label> 
        <input name="nname" id="nname" type="text" tabindex="11" />
        <br />

        <label for="ninformation">Information : </label>
        <textarea id="ninformation" name="ninformation"></textarea>

        <div align="center">
            <input id="button1" type="submit"/> 
            <input id="button2" type="reset" />
        </div>
</form>

<script type="text/javascript">
$(document).ready(function(){
        var options_employeeadd = { 
                beforeSubmit:  validate_employeeadd,  // pre-submit callback 
                success:       showResponse_employeeadd  // …