如何在不重新加载页面的情况下上传图片答案

【问题标题】：How to upload images without page reloading如何在不重新加载页面的情况下上传图片
【发布时间】：2015-07-13 11:05:41
【问题描述】：

我有一个 php 函数，可以在我的文件夹 images 中上传图片：

if(isset($_FILES['filename']))
{
 $Dest = dirname(__FILE__).'/images/';
 if(!isset($_FILES['filename']) || !is_uploaded_file($_FILES['filename']['tmp_name'][0]))
 {
 die('Something went wrong with Upload!');
 }

 $ImageName = str_replace(' ','-',strtolower($_FILES['filename']['name'][0]));
 $ImageType = $_FILES['filename']['type'][0]; //"image/png", image/jpeg etc.
 
 $ImageExt = substr($ImageName, strrpos($ImageName, '.'));
 $ImageExt = str_replace('.','',$ImageExt);
 
 $ImageName = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);

 //Create new image name (with random number added).
 $NewName = $ImageName.'.'.$ImageExt;
 
 move_uploaded_file($_FILES['filename']['tmp_name'][0], "$Dest/$NewName");
 $base_path="http://".$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']);
 $base=$base_path.'/'.'images/'.$NewName;
 ?>
 <script>
	window.history.back();
</script>
 <?php
}

这是我的表格：

<form action="images.php" ng-show="data.uploadFile"  method="post" enctype="multipart/form-data" name="fileupload" id="fileupload">
	<input name="filename[]" id="filename" type="file" />
	<input type="submit" id="submit" ng-click="data.uploadFile = !data.uploadFile" value="Upload" />
</form>

最后这是我从文件夹中获取所有图像的 Js 代码：

sliders.controller('MainController', ['$scope', '$interval', '$http', function($scope, $interval, $http) {

	$scope.data = {uploadFile: false};

	//variables for slider #1
	$scope.timer1;
	$scope.index1 = 0;
	
	//variables for slider #2
	$scope.timer2;
	$scope.index2 = 0;
	

	$http.get('images.php').success(function(data) {
		$scope.images = data.split(',');
		$scope.images.pop();
	}); //get array with images and put in $scope.images

我正在使用 angularJs，实际上我不明白如何在不重新加载页面的情况下使用 angular 或 AJAX 上传图像，例如，如果我将在我的表单中使用一些 js 函数而不是 action="images .php”，那么php上传功能如何工作？

如果有人解释我该怎么做，我将不胜感激，谢谢。

【问题讨论】：

标签： javascript php jquery ajax angularjs

【解决方案1】：

images.php你可以试试这个代码：

在您的 HTML 中：

/* Add id parameter to form */
<form id="form-id" action="images.php" ng-show="data.uploadFile"  method="post" enctype="multipart/form-data" name="fileupload" id="fileupload">
    <input name="filename[]" id="filename" type="file" />
    <input type="submit" id="submit" ng-click="data.uploadFile = !data.uploadFile" value="Upload" />
</form>

在你的 JS 中：

/* Prevent submit and send by Ajax Call */
$(document).ready(function (e) {
    $('#form-id').on('submit',(function(e) {
        e.preventDefault();
        var data = new FormData(this);

        $.ajax({
            type: 'post',
            url: 'images.php',
            processData: false,
            contentType: false,
            data: data,
            success: function(result){
                console.log(result);
            },
            error: function(error){
                console.log("error");
            }
        });
    }));
});

更新：

我在 Ajax 调用中添加了“processData”和“contentType”参数。

【讨论】：

在 url 中：'url:'your.server.com/path/',' 它应该是我的 php 文件的路径？
是的，“url”与表单中的“action”的值相同，在本例中为“images.php”，在回复中更改了。
不幸发生错误：Uncaught TypeError: Illegal invocation
对不起，我弄错了，请等我检查答案。
好的，尝试在ajax调用中添加processData和contentType参数，示例更新。

【解决方案2】：

有许多插件可用于文件上传而无需加载页面并自行显示图像预览。我在这里列出了带有演示链接的插件..

dropzone
Bootstrap file upload

【讨论】：