相关疑难解决方法(0)

我目前通过AJAX使用以下代码发布我的表单:

$(document).ready(function(){
    $("form#createForm").submit(function() { // loginForm is submitted
        $("form#createForm input#createForm_submit").attr('disabled','disabled');

        tinyMCE.triggerSave();

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "perform", // URL of the Perl script
            data: $("#createForm").serialize(),

            // script call was successful 
            // data contains the JSON values returned by the Perl script 
            success: function(data){

                $('div.form-group').each(function(){
                    $(this).removeClass('has-error');
                });

                if (data.error) { // script returned error
                    var myList = $('ul.msg-list').empty();

                    $.each(data.msg, function(key,item) {
                        $("div."+key).addClass('has-error');
                        $('<li>').text(item.errtxt).appendTo(myList);
                    });


                    $('div#create_createresult').html('some error').html(myList);
                    $('div#create_createresult').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr('disabled');
                } // if
                else 
                { // login was successful
                    //$('form#login_loginform').hide();
                    $('div#create_createresult').text(data.msg); …

基本上我想在提交表单时传递带有ajax的图像文件并检索图像并通过电子邮件将其作为附件文件发送:

这是表格:

<form role="form" action="" name="devis" id="devis" method="post" enctype="multipart/form-data" class="form-horizontal">
    <fieldset>
        <div class="form-group">
            <label class="control-label col-md-4" for="societe">Company</label>
            <div class="col-md-8">
                <input type="text" class="form-control input-md col-md-8" name="societe" value="" maxlength="" id="societe">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="message"><span class="required">* </span>Message</label>
            <div class="col-md-8">
                <textarea rows="5" name="message" class="form-control input-md col-md-8" maxlength="" required="" style="resize:none;" id="message"></textarea>
            </div>
        </div>
        <div class="form-group" id="input_file">
            <label class="control-label col-md-4" for="image_input_field">Logo</label>
            <div class="col-md-8">
            <div class="input-group uploaddiv">
                <span class="input-group-btn">
                    <span class="btn btn-default btn-file">
                        Parcourir <input type="file" id="image_input_field" name="file">
                    </span>
                </span>
                <input …

我知道这个问题已经被问了很多,我尝试了至少10个不同的代码来运行它没有成功.我正在尝试使用jquery.ajax上传单个文件,但它不起作用.下面的代码总是输出:'请选择一个文件',因为文件的名称没有设置或其他东西

HTML:

<form enctype="multipart/form-data">
  <input name="file" type="file" />
  <input type="button" value="Upload" />
</form>
<div id="result"></div>

jQuery的:

$(function(){
  $(document).ready(function(){
    var files;

    $('input[type=file]').on('change', prepareUpload);
    function prepareUpload(event){
      files = event.target.files;
    };
    $(':button').click(function(){
        var formData = new FormData();
        $.each(files, function(key, value){
          formData.append(key, value);
        });
        alert(formData);
        $.ajax({
          url: 'check.php',  
          type: 'GET',
          data: formData,
          success: function(data){ $('#result').html(data); }, 
          cache: false,
          contentType: false,
          processData: false
        });
    });
  });
});

});

PHP:

if(isset($_GET['file'])){
    $filename = $_FILES['file']['name'];
    if(isset($filename) && !empty($filename)){
        echo 'sup my man?!';
    }else{
        echo 'please choose a …

我找到了以下很棒的主题,并解释了如何使用新的HTML5 FormData API通过AJAX/Jquery进行文件上传

这是该代码的略微更新版本,使用较新的JQuery 1.8+语法

$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: '/Upload',  //my ASP.NET MVC method
        type: 'POST',
        // handle the progress report
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction,    false); // For handling the progress of the upload
            }
            return myXhr;
        },

        // Form data
        data: formData,

        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: …

我正在使用jQuery ajaxForms插件将ajax提交到我的CakePHP应用程序.

Cake的RequestHandler通过查看"X-Requested-With"标头来检测ajax请求,但表单插件似乎没有设置它.或者jQuery在使用插件时没有设置它.

我尝试了几件事,

在主要的onload功能中我添加了:

$.ajaxSetup({
    headers: {"X-Requested-With":"XMLHttpRequest"}
});

在插件代码中,我在实际的ajax调用之前添加了这个:

options.beforeSend = function(xhr) {
    xhr.setRequestHeader("X_REQUESTED_WITH", "XMLHttpRequest");
};

进行常规的ajax调用,确实设置了标题......

任何人都可以告诉我发生了什么或最重要的,我该如何解决这个问题？

我有一个带文件输入的表单.如何获取文件并使用jQuery将其发布到php脚本？我可以使用.val()来获取值然后发布吗？例如,假设文件输入的id为file,我可以这样做:

$('#submit').click(function() {
    var file = $('#file').val();
    $.post('script.php', { "file": file }, function(data) {
        // do something here after post complete
    }, 'json');
});

谢谢

我正在尝试通过ajax上传文件以及表单中的某些字段.但是,它不起作用.我收到这个错误.

未定义的索引: - 文件

这是我的代码.

HTML

    <!-- File Button --> 
    <div class="form-group">
    <label class="col-md-4 control-label" for="file">Upload Software / File</label>
    <div class="col-md-4">
    <input id="file" name="file" class="input-file" type="file">
    </div>
    </div>

<div class="form-group">
<label class="col-md-4 control-label" for="price">Price($)</label>  
<div class="col-md-4">
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required=""> 
</div>
</div>

阿贾克斯

$("#add_product").click(function(e){
    e.preventDefault();
    product_name = $("product_name").val();
    //d = $("#add_new_product").serialize();
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: $("#add_new_product").serialize(),
        success: function(response)
        {
            //
            alert(response);

        }
    })
});

PHP

if (0 < $_FILES['file']['error']) 
{
 echo ":!";
}
else …

我已经看了很多脚本,用于通过拖放式AJAX将图像上传到服务器.我找到的脚本不是jQuery,非常大,并没有完全按照我的意愿行事.

将来它应该使用jQuery,AJAX和PHP上传图像.

我的问题

在许多示例中,我查看了e.dataTransfer.files的工作.在我的情况下,它没有.我需要以某种方式绑定它吗？

我想尽可能多地使用jQuery.

的jsfiddle

尽情玩耍......

http://jsfiddle.net/AMjEz/

码

<html>
    <head>
        <style type="text/css">
            #dropzone {
                border: 2px dashed #ccc;
                width: 300px;
                height: 200px;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#dropzone').on({
                    dragenter: function(e) {
                        $(this).css('background-color', 'lightBlue');
                    },
                    dragleave: function(e) {
                        $(this).css('background-color', 'white');
                    },
                    drop: function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                        console.log(e.dataTransfer.files);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="dropzone">
            Drop files here
        </div>
    </body>
</html>

出于某些原因,使用带有Ajax的CarrierWave gem似乎并不适合我.难道我做错了什么？我很好地遵循了253 CarrierWave Railscast,它在没有AJAX的情况下工作,但在我的应用程序中我需要使用AJAX.这是我的代码:

在图像文件字段中选择jpeg后的参数列表:

Parameters: {"item"=>{"remote_image_url"=>""}}

new.html.erb:

<%= form_for(@item, :url => create_item_path, :html => {:id => "create_item_form", :multipart => true}) do |f| %>
    <p>
      <%= f.file_field :image %>
    </p>
    <p>
      <%= f.label :remote_image_url, "or image URL" %><br />
      <%= f.text_field :remote_image_url %>
    </p>
    <%= f.submit "Save", :id => "save_button" %>
<% end %>

的application.js

$("#create_item_form").submit(function() {
    $.ajax({
      type: "POST",
      url: $(this).attr("action"),
      dataType: "script",
      data:  $("#destination_item").sortable('serialize') + "&" + $(this).serialize()
      });
      return false;
});

item.rb的

class Item < ActiveRecord::Base
  attr_accessible …

JavaScript对于以下用例,什么是简洁明了的解决方案:

在网页上,用户从本地文件系统中选择并上传文本文件,但不是将文件加载到服务器,而是打开客户端javascript代码并处理文件内容,并将结果写入同一页面没有刷新页面.

注意:我不需要保留文件的内容 - 如果用户关闭页面,则内容丢失,这很好.一切都应该发生在客户端的页面上 - 无需触摸服务器.

如果有一些轻量级的JQuery插件,很想知道!