jQuery的/ AJAX上传图片，并保存到文件夹 [英] jQuery / ajax upload image and save to folder

查看：147 发布时间：2015/11/30 0:17:10 php jquery ajax file-upload

本文介绍了jQuery的/ AJAX上传图片，并保存到文件夹的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新code以下

我发现了一些code，能够上传图片并显示其缩略图。但是，我想将图像保存到特定的文件夹中。

什么jQuery的code或AJAX code，我可以用原来的图像保存到我的选择的文件夹？

下面是完整的code：

 ＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;脚本SRC =HTTP：//$c$c.jquery.com/jquery-1.8.3.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;

＆LT;风格＆GT;
。输入文件排-1：后{
    内容： 。;
    显示：块;
    明确：两个;
    能见度：隐藏;
    的line-height：0;
    身高：0;
}

。输入文件排-1- {
    显示：inline-block的;
    保证金顶：25像素;
    位置：亲属;
}

＃preview_image {
  显示：无;
  宽度：90px;
  高度：90px;
  保证金：2px的0px 0px 5px的;
  边界半径：10px的;
}

.upload文件容器{
    位置：亲属;
    宽度：100像素;
    高度：137px;
    溢出：隐藏;
    背景：网址（http://i.imgur.com/AeUEdJb.png）顶级中锋不重复;
    浮动：左;
    保证金左：23px;
}

.upload文件容器文本{
    字体-family：宋体，无衬线;
    字体大小：12px的;
    颜色：＃719d2b;
    的line-height：17px;
    文本对齐：中心;
    显示：块;
    位置：绝对的;
    左：0;
    底部：0;
    宽度：100像素;
    高度：35px;
}

.upload文件容器文本＆GT;跨度{
    下边框：1px的固体＃719d2b;
    光标：指针;
}

.one_opacity_0 {
  不透明度：0;
  身高：0;
  宽度：1px的;
  浮动：左;
}
＆LT; /风格＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{

   功能readURL（输入目标）{
        如果（input.files＆安培;＆安培; input.files [0]）{
            VAR读卡器=新的FileReader（）;
            VAR image_target = $（目标）;
            reader.onload =功能（E）{
                image_target.attr（SRC，e.target.result）.show（）;
            };
            reader.readAsDataURL（input.files [0]）;
         }
     }

    $（＃patient_pic）。生活（变，函数（）{
        readURL（这一点，＃preview_image）
    }）;

}）;
＆LT; / SCRIPT＆GT;

＆LT; /头＆GT;

＆LT;身体GT;
＆LT;表格名称=的方法=邮报行动=＃级=反馈表-1＆GT;
    ＆LT;字段集＆GT;
        ＆LT; DIV CLASS =输入文件行1＆GT;
            ＆LT; DIV CLASS =上传文件容器＆GT;
                ＆LT; IMG ID =preview_imageSRC =＃ALT =/＆GT;
                ＆LT; DIV CLASS =上传文件容器文本＆GT;
                    ＆LT; DIV CLASS ='one_opacity_0'＆GT;
                        ＆LT;输入类型=文件ID =patient_pic标签=添加/＆GT;
                    ＆LT; / DIV＆GT;
                    ＆LT;跨度＆GT;上传照片＆LT; / SPAN＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; /字段集＆GT;
＆LT; /形式GT;
＆LT; /身体GT;

＆LT; / HTML＆GT;

更新：我觉得我是在正确的轨道。我很接近，但我不知道从jQuery发送哪些数据。我添加了一个PHP scrit和它得到一个回调的成功，但我没有发出正确的变种。我想，如果我只是发出正确的VAL我能得到它。 code：

 ＆LT;脚本＆GT;
$（文件）。就绪（函数（）{

   功能readURL（输入目标）{
        如果（input.files＆安培;＆安培; input.files [0]）{
            VAR读卡器=新的FileReader（）;
            VAR image_target = $（目标）;
            reader.onload =功能（E）{
                image_target.attr（SRC，e.target.result）.show（）;


                 $阿贾克斯（{
            键入：POST，
            网址：theUpload.php，
            数据：input.files [0]，
            成功：功能（数据）{
                的console.log（成功）;
                的console.log（数据）;
                警报（数据）;
            }，
            错误：功能（数据）{
                的console.log（错误）;
                的console.log（数据）;
            }
        }）;



            };
            reader.readAsDataURL（input.files [0]）;








         }
     }

    $（＃patient_pic）。生活（变，函数（）{
        readURL（这一点，＃preview_image）
    }）;

}）;
＆LT; / SCRIPT＆GT;

解决方案

试试这个。

脚本：

 函数uploadFile（）{
  VAR输入=的document.getElementById（文件）;
  文件= input.files [0];
  如果（文件！=未定义）{
    FORMDATA =新FORMDATA（）;
    如果（!! file.type.match（/图像。* /））{
      formData.append（形象，文件）;
      $阿贾克斯（{
        网址：upload.php的，
        键入：POST，
        数据：FORMDATA，
        过程数据：假的，
        的contentType：假的，
        成功：功能（数据）{
            警报（成功）;
        }
      }）;
    }其他{
      警报（不是一个有效的图像！'）;
    }
  }其他{
    警报（输入的东西！）;
  }
}

HTML：

 ＆LT; HTML＆GT;
＆LT; HEAD＆GT;
    ＆LT;脚本SRC =HTTP：//$c$c.jquery.com/jquery-latest.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT;输入类型=文件ID =文件/＆GT;
    ＆LT;按钮的onclick =一个UploadFile（）;＆GT;上传＆LT; /按钮＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

upload.php的：

 ＆LT; PHP
$ DIR =图像/;
move_uploaded_file（$ _ FILES [形象] [tmp_name的值]，$ DIR $ _FILES [形象] [名称]）;
？＆GT;

UPDATE CODE BELOW

I found some code that is able to upload an image and display its thumbnail. However, I would like to save the images to a particular folder as well.

What jQuery code or ajax code can I use to save the original image to a folder of my choice?

Here is the live demo: http://jsfiddle.net/dn9Sr/2/

Here is the full code:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>

<style>
.input-file-row-1:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.input-file-row-1{
    display: inline-block;
    margin-top: 25px;
    position: relative;
}

#preview_image {
  display: none;
  width: 90px;
  height: 90px;
  margin: 2px 0px 0px 5px;
  border-radius: 10px;
}

.upload-file-container { 
    position: relative; 
    width: 100px; 
    height: 137px; 
    overflow: hidden;   
    background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
    float: left;
    margin-left: 23px;
} 

.upload-file-container-text{
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #719d2b;
    line-height: 17px;
    text-align: center;
    display: block;
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100px; 
    height: 35px;
}

.upload-file-container-text > span{
    border-bottom: 1px solid #719d2b;
    cursor: pointer;
}

.one_opacity_0 {
  opacity: 0;
  height: 0;
  width: 1px;
  float: left;
}
</style>
<script>
$( document ).ready(function() {

   function readURL(input, target) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            var image_target = $(target);
            reader.onload = function (e) {
                image_target.attr('src', e.target.result).show();
            };
            reader.readAsDataURL(input.files[0]);
         }
     }

    $("#patient_pic").live("change",function(){
        readURL(this, "#preview_image")
    });

});
</script>

</head>

<body>
<form name="" method="post" action="#" class="feedback-form-1">
    <fieldset>
        <div class="input-file-row-1">
            <div class="upload-file-container">
                <img id="preview_image" src="#" alt="" />
                <div class="upload-file-container-text">
                    <div class = 'one_opacity_0'>
                        <input type="file" id="patient_pic" label = "add" />
                    </div>
                    <span> Add Photo </span>
                </div>
            </div>
        </div>
    </fieldset>
</form>
</body>

</html>

UPDATE: I think I am on the right track. I am close but I don't know what data to send from the jQuery. I added a php scrit and its getting a call back as success but I am not sending the right var. I think if I just send the right val I can get it. CODE:

<script>
$( document ).ready(function() {

   function readURL(input, target) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            var image_target = $(target);
            reader.onload = function (e) {
                image_target.attr('src', e.target.result).show();


                 $.ajax({
            type:'POST',
            url: 'theUpload.php',
            data: input.files[0],
            success:function(data){
                console.log("success");
                console.log(data);
                alert(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });



            };
            reader.readAsDataURL(input.files[0]);








         }
     }

    $("#patient_pic").live("change",function(){
        readURL(this, "#preview_image")
    });

});
</script>

解决方案

Try this one.

Script:

function uploadFile(){
  var input = document.getElementById("file");
  file = input.files[0];
  if(file != undefined){
    formData= new FormData();
    if(!!file.type.match(/image.*/)){
      formData.append("image", file);
      $.ajax({
        url: "upload.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data){
            alert('success');
        }
      });
    }else{
      alert('Not a valid image!');
    }
  }else{
    alert('Input something!');
  }
}

HTML:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    
</head>
<body>
    <input type="file" id="file" />
    <button onclick="uploadFile();">Upload</button>
</body>
</html>

upload.php:

<?php
$dir = "image/";
move_uploaded_file($_FILES["image"]["tmp_name"], $dir. $_FILES["image"]["name"]);
?>

这篇关于jQuery的/ AJAX上传图片，并保存到文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

jQuery的/ AJAX上传图片，并保存到文件夹 [英] jQuery / ajax upload image and save to folder

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

jQuery的/ AJAX上传图片，并保存到文件夹 [英] jQuery / ajax upload image and save to folder

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

登录关闭