Question

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

attribute a <a href="#swap"  class="showSwitcher" onfocus="this.blur()" name="swaplinkA" id="swaplinkA">Remove</a>
attribute b <a href="#swap"  class="showSwitcher" onfocus="this.blur()" name="swaplinkB" id="swaplinkB">Remove</a>
attribute c <a href="#swap"  class="showSwitcher" onfocus="this.blur()" name="swaplinkC" id="swaplinkC">Remove</a>

<hr/>

<div class="swaplinkA swaplinkB" style="display:inline">Element 1</div>
<div class="swaplinkA"style="display:inline">Element 2</div>
<div class="swaplinkA swaplinkC"style="display:inline">Element 3</div>

这是我的表格：

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
}

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

<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>

我正在使用angularJs，实际上我无法理解如何在不重新加载页面的情况下使用angular或AJAX上传图像，例如，如果我将在我的表单中使用，则使用某些js函数而不是action =“images .php“，那怎么会运行php上传功能？

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

Answer 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");
            }
        });
    }));
});

更新

我添加了＆＃34; processData＆＃34;和＆＃34; contentType＆＃34;参数到Ajax Call。

Answer 2

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

dropzone
的 Bootstrap file upload

如何上传图像而不重新加载页面

2 个答案: