Javascript 如何在jquery中通过图像上传发送文本输入值

我有一个jquery函数，它用php文件发出请求，并将图像上传到服务器上。这里是jquery代码，它很容易阅读

<script type="text/javascript">
//customize values to suit your needs.
var max_file_size       = 8048576; //maximum allowed file size
var allowed_file_types  = ['image/png', 'image/gif', 'image/jpeg', 'image/pjpeg']; //allowed file types
var message_output_el   = 'output'; //ID of an element for response output
var loadin_image_el     = 'loading-img'; //ID of an loading Image element

var bla = $('#contentMessage').val(); // how can i send this variable too in post
//You may edit below this line but not necessarily
var options = { 
    //dataType:  'json', //expected content type
    target: '#' + message_output_el,   // target element(s) to be updated with server response 
    beforeSubmit: before_submit,  // pre-submit callback 
    success: after_success,  // post-submit callback 
    resetForm: true        // reset the form after successful submit 
}; 

$('#upload_form').submit(function(){
    $(this).ajaxSubmit(options); //trigger ajax submit
    return false; //return false to prevent standard browser submit
}); 

function before_submit(formData, jqForm, options){
    var proceed = true;
    var error = []; 
    /* validation ##iterate though each input field
    if you add extra text or email fields just add "required=true" attribute for validation. */
    $(formData).each(function(){ 

        //check any empty required file input
        if(this.type == "file" && this.required == true && !$.trim(this.value)){ //check empty text fields if available
            error.push( this.name + " is empty!");
            proceed = false;
        }

        //check any empty required text input
        if(this.type == "text" && this.required == true && !$.trim(this.value)){ //check empty text fields if available
            error.push( this.name + " is empty!");
            proceed = false;
        }

        //check any invalid email field
        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
        if(this.type == "email" && !email_reg.test($.trim(this.value))){ 
            error.push( this.name + " contains invalid email!");
            proceed = false;          
        }

        //check invalid file types and maximum size of a file
        if(this.type == "file"){
            if(window.File && window.FileReader && window.FileList && window.Blob){
                if(this.value !== ""){
                    if(allowed_file_types.indexOf(this.value.type) === -1){
                        error.push( "<b>"+ this.value.type + "</b> is unsupported file type!");
                        proceed = false;
                    }

                    //allowed file size. (1 MB = 1048576)
                    if(this.value.size > max_file_size){ 
                        error.push( "<b>"+ bytes_to_size(this.value.size) + "</b> is too big! Allowed size is " + bytes_to_size(max_file_size));
                        proceed = false;
                    }
                }
            }else{
                error.push( "Please upgrade your browser, because your current browser lacks some new features we need!");
                proceed = false;
            }
        }

    }); 

    $(error).each(function(i){ //output any error to element
        $('#' + message_output_el).html('<div class="error">'+error[i]+"</div>");
    }); 

    if(!proceed){
        return false;
    }

    $('#' + loadin_image_el).show();
}

//Callback function after success
function after_success(data){
    $('#' + message_output_el).html(data);
    $('#' + loadin_image_el).hide();
}

//Callback function to format bites bit.ly/19yoIPO
function bytes_to_size(bytes){
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Bytes';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
</script>

//自定义值以满足您的需要。
var max_file_size=8048576//允许的最大文件大小
var-allowed_-file_-types=['image/png'，'image/gif'，'image/jpeg'，'image/pjpeg']//允许的文件类型
var消息_输出_el=‘输出’//响应输出的元素的ID
var loadin_image_el='loading img'//正在加载的图像元素的ID
var bla=$（'#contentMessage'）.val（）；//如何在post中也发送此变量
//您可以在此行下方进行编辑，但不一定
变量选项={
//数据类型：“json”，//预期的内容类型
目标：“#”+消息输出，//要使用服务器响应更新的目标元素
beforeSubmit:before_submit，//预提交回调
成功：成功后，//post submit回调
resetForm:true//成功提交后重置表单
}; 
$（'#上传表格'）。提交（函数（）{
$（this）.ajaxSubmit（选项）；//触发ajaxSubmit
return false；//返回false以防止标准浏览器提交
}); 
提交前的函数（formData、jqForm、options）{
var=true；
var错误=[]；
/*验证##迭代每个输入字段
如果您添加额外的文本或电子邮件字段，只需添加“required=true”属性进行验证*/
$（formData）.each（函数（）{
//检查所需的任何空文件输入
如果（this.type==“file”&&this.required==true&&！$.trim（this.value））{//检查空文本字段（如果可用）
错误。推送（this.name+“为空！”）；
继续=错误；
}
//检查所需的任何空文本输入
如果（this.type==“text”&&this.required==true&&！$.trim（this.value））{//检查空文本字段（如果可用）
错误。推送（this.name+“为空！”）；
继续=错误；
}
//检查任何无效的电子邮件字段
var email\u reg=/^（[\w-\.]+@（[\w-]+\.）+[\w-]{2,4}）？$/；
如果（this.type==“email”&&！email_reg.test（$.trim（this.value））{
错误。推送（this.name+“包含无效电子邮件！”）；
继续=错误；
}
//检查无效的文件类型和文件的最大大小
如果（this.type==“文件”）{
if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
如果（this.value！==“”）{
if（允许的\u文件\u types.indexOf（this.value.type）=-1）{
错误。推送（“+this.value.type+”是不支持的文件类型！”）；
继续=错误；
}
//允许的文件大小。（1 MB=1048576）
如果（this.value.size>max_file_size）{
错误。推送（“+bytes\u to\u size（this.value.size）+”太大！允许的大小为“+bytes\u to\u size（max\u file\u size））；
继续=错误；
}
}
}否则{
错误。推送（“请升级您的浏览器，因为您当前的浏览器缺少我们需要的一些新功能！”）；
继续=错误；
}
}
}); 
$（错误）。每个（函数（i）{//将任何错误输出到元素
$（'#'+message_output_el）.html（''+error[i]+'）；
}); 
如果（！继续）{
返回false；
}
$（'#'+loadin_image_el）.show（）；
}
//成功后的回调函数
成功后的功能（数据）{
$（“#”+消息输出.html（数据）；
$（'#'+loadin_image_el）.hide（）；
}
//用于格式化bit.ly/19yoIPO位的回调函数
函数字节到大小（字节）{
变量大小=['Bytes'、'KB'、'MB'、'GB'、'TB']；
if（bytes==0）返回'0 bytes'；
var i=parseInt（Math.floor（Math.log（字节）/Math.log（1024））；
返回Math.round（字节/Math.pow（1024，i），2）+''+大小[i]；
}

下面是Html代码

<form action="/ajax/createPostArticle" method="post" enctype="multipart/form-data" id="upload_form">
<input type="file" name="image_file" id="cretor">
<textarea rows="4" id="contentMessage" class="form-control"></textarea>
<button class="btn btn-success">POST</button>

邮递

---

我想在请求中将textarea输入发送到php如何实现这一点

您可以通过以下方式在ajax中发送帖子数据：

var options = { 
    //dataType:  'json', //expected content type
    data: {id1: $('#id1').val()}, //Note the data here for sending values
    target: '#' + message_output_el,   // target element(s) to be updated with server response 
    beforeSubmit: before_submit,  // pre-submit callback 
    success: after_success,  // post-submit callback 
    resetForm: true        // reset the form after successful submit 
}; 

---

您可以通过以下方式在ajax中发送post数据：

var options = { 
    //dataType:  'json', //expected content type
    data: {id1: $('#id1').val()}, //Note the data here for sending values
    target: '#' + message_output_el,   // target element(s) to be updated with server response 
    beforeSubmit: before_submit,  // pre-submit callback 
    success: after_success,  // post-submit callback 
    resetForm: true        // reset the form after successful submit 
}; 

您缺少name属性，应该是

<textarea rows="4" id="contentMessage" name="contentMessage" class="form-control"></textarea>

PHP通过名称理解post值。

您缺少name属性，应该是

<textarea rows="4" id="contentMessage" name="contentMessage" class="form-control"></textarea>

---

PHP通过名称理解post值。

我在表单中的操作链接中没有看到任何

PHP

扩展，或者您正在使用自定义url？？？是的，我正在使用自定义url您在ur action=“/ajax/createPostArticle”中得到的内容file@Plumaction=“/ajax/createPostArticle”==action=“/ajax/createPostArticle.php”我刚刚删除了php扩展，动作很好。我在表单中的动作链接中没有看到任何

php

扩展，或者您正在使用自定义url？？？是的，我正在使用自定义url您在ur action=“/ajax/createPostArticle”中得到的内容file@Plumaction=“/ajax/createPostArticle”==action=“/ajax/createPostArticle.php”我刚刚删除了php扩展，操作很好，它发送的是空白文本区域data@SagarSingh：尝试通过Firefox FireBug实用程序检查post请求。！如果它真的没有发布任何数据@SagarSingh：删除

数据类型：

json

，

，我希望它将开始发布数据。。！因为现在它可能正在发布数据，但它将是JSON格式的。。！它正在发送空白文本区域data@SagarSingh：尝试通过Firefox FireBug实用程序检查post请求。！如果它真的没有发布任何数据@SagarSingh：删除

数据类型：

json

，

，我希望它将开始发布数据。。！因为现在它可能正在发布数据，但它将是JSON格式的。。！在添加name=“contentMessage”之后，jquery正在发送contentMessage参数，但是当我在php页面上回显它时，它显示nothing echo$\u POST['contentMessage']；清除ajaxphp页面中的所有代码并echo$_POST['contentMessage']；请