上传图片的形式提交与阿贾克斯

上传图片的形式提交与阿贾克斯

本文介绍了上传图片的形式提交与阿贾克斯的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有形式submited与阿贾克斯我不能上传图片在此提交

 <形式ID =形式项NAME =形式项的方法=邮报是enctype =的multipart / form-data的>
<输入ID =uploadBtnNAME =uploadimg类型=文件级=上传/>
< /表
 

在提交code

 如果($ _ FILES ['uploadimg'] ['大小'] 0)
{
    $ FTYPE = $ _ FILES [uploadimg] [型];
    如果(move_uploaded_file($ _ FILES ['uploadimg'] ['tmp_name的值'],$ target_path))
    {
        $默认= 1;
        $ MESG =文件上传成功;
    }
    其他
        $ MESG =文件上传失败!;
    其他
        $ MESG =请选择一个文件;
 

输出:请选择一个文件

JavaScript的code

  $(#表单项目)。递交(函数()
{
    $阿贾克斯({
        网址:AJAX / submitform.php
        键入:POST,
        数据:$(#表单项目)序列化()。
        成功:函数(响应){
            警报(响应);
        }
    });
});
 

解决方案

这是最容易使用的类:

所以,现在你有一个FORMDATA对象,准备连同XMLHtt prequest发送。并追加与FORMDATA对象字段

 <脚本类型=文/ JavaScript的>
           $(文件)。就绪(函数(){
               变种形式= $('#形式项'); //有效的形式选择
               form.on('提交',函数(C){
                   。çpreventDefault();

                   VAR数据=新FORMDATA();
                   $每个($(':输入,形式),功能(我,个行业){
                       data.append($(个行业).attr(名称),$(个行业).VAL());
                   });
                   $每个($('输入[type = file]',形式)[0] .files,功能(我,文件){
                       data.append(file.name,文件);
                   });
                   $阿贾克斯({
                       网址:AJAX / submitform.php',
                       数据:数据,
                       缓存:假的,
                       的contentType:假的,
                       过程数据:假的,
                       键入:POST,
                       成功:函数(C){
                            // $ C $这里如果你想表现出任何成功的消息C
                           警报(响应);
                       }
                   });
                   返回false;
               });
           })
< / SCRIPT>
 

并迫使jQuery的不添加一个Content-Type头给你,否则,上传文件的边界线会从它丢失了。

I have form submited with Ajax I can't upload image in this submit

<form id="forms-items" name="forms-items" method="post" enctype="multipart/form-data">
<input id="uploadBtn" name="uploadimg" type="file" class="upload" />
</form

in submit code

if($_FILES['uploadimg']['size']>0)
{
    $ftype=$_FILES["uploadimg"]["type"];
    if(move_uploaded_file($_FILES['uploadimg']['tmp_name'], $target_path))
    {
        $default=1;
        $mesg="File Uploaded Successfully";
    }
    else
        $mesg="File Uploading Failed!!";
    else
        $mesg="Please Select A File";

The output: Please Select A File

JavaScript code

$("#forms-items").submit(function()
{
    $.ajax({
        url: "ajax/submitform.php",
        type: "POST",
        data: $("#forms-items").serialize(),
        success: function(response) {
            alert(response);
        }
    });
});
解决方案

it’s easiest to use the FormData() class:

So now you have a FormData object, ready to be sent along with the XMLHttpRequest. and append fields with FormData Object

<script type="text/javascript">
           $(document).ready(function () {
               var form = $('#forms-items'); //valid form selector
               form.on('submit', function (c) {
                   c.preventDefault();

                   var data = new FormData();
                   $.each($(':input', form ), function(i, fileds){
                       data.append($(fileds).attr('name'), $(fileds).val());
                   });
                   $.each($('input[type=file]',form )[0].files, function (i, file) {
                       data.append(file.name, file);
                   });
                   $.ajax({
                       url: 'ajax/submitform.php',
                       data: data,
                       cache: false,
                       contentType: false,
                       processData: false,
                       type: 'POST',
                       success: function (c) {
                            //code here if you want to show any success message
                           alert(response);
                       }
                   });
                   return false;
               });
           })
</script>

and forcing jQuery not to add a Content-Type header for you, otherwise, the upload file boundary string will be missing from it.

这篇关于上传图片的形式提交与阿贾克斯的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-22 22:23