销售管理系统中图片上传：分享php+ajax的简便方法

在我最近撰写的销售管理系统中，用户需要上传产品的图片。我发现了很多插件，这些插件非常麻烦且难以修改。最后，我找到了一篇文章，该文章使用PHP和Ajax上传图片。代码感觉很简单。而且很容易更改。将其转发在这里与您分享：

在本文中，我们使用AJAX表单提交插件：JQERY.FORM.JS。专家修改了几行代码，并将其更改为：jquery.wallform.js。它直接使用。

HTML部分

我们在页面上贴上表单，并使用帖子将其提交给背景PHP处理程序上传。请注意，Enctype属性设置支持文件上传。 #preview用于显示上传的图片。关于CSS样式设置，请参阅下载软件包的源代码。

<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php"> 
    <div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/>div> 
    <div id="up_btn" class="btn"> 
        <span>添加图片span> 
        <input id="photoimg" type="file" name="photoimg"> 
    div> 
form> 
<p>最大100KB，支持jpg，gif，png格式。p> 
<div id="preview">div> 

jQuery部分

此示例基于jQuery，因此必须在页面中加载jQuery库和jQuery.wallform.js。

单击“添加图片”按钮时，“选择文件对话框”弹出。选择要上传的图片后，触发了更改事件。然后表格#imageform调用jquery.wallform.js的ajaxform（）方法，将表单数据提交给背景PHP进行处理，并根据返回的结果处理页面元素的显示。如果成功上传，则图片将在第一个页面上显示。对于使用Ajaxform（），您可以参考此站点上的文章：Ajax表单提交插件JQery表单。

 
 
$(function(){ 
    $('#photoimg').die('click').live('change', function(){ 
        var status = $("#up_status"); 
        var btn = $("#up_btn"); 
        $("#imageform").ajaxForm({ 
            target: '#preview',  
            beforeSubmit:function(){ 
                status.show(); 
                btn.hide(); 
            },  
            success:function(){ 
                status.hide(); 
                btn.show(); 
            },  
            error:function(){ 
                status.hide(); 
                btn.show(); 
        } }).submit(); 
    }); 
});

PHP部分

upload.php流程图像上传并将上传的图像保存在上传/目录中。请注意，目录必须具有写入权限。首先，您需要检查图像格式和图像大小是否满足要求。然后使用MOVE_UPLOADED_FILE（）上传图像并重命名图像，格式为：time（）。rand（100,999）。

$path = "uploads/"; 
$extArr = array("jpg", "png", "gif"); 
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){ 
    $name = $_FILES['photoimg']['name']; 
    $size = $_FILES['photoimg']['size']; 
    if(empty($name)){ 
        echo '请选择要上传的图片'; 
        exit; 
    } 
    $ext = extend($name); 
    if(!in_array($ext,$extArr)){ 
        echo '图片格式错误！'; 
        exit; 
    } 
    if($size>(100*1024)){ 
        echo '图片大小不能超过100KB'; 
        exit; 
    } 
    $image_name = time().rand(100,999).".".$ext; 
    $tmp = $_FILES['photoimg']['tmp_name']; 
    if(move_uploaded_file($tmp, $path.$image_name)){ 
        echo '.$path.$image_name.'"  class="preview">'; 
    }else{ 
        echo '上传出错了！'; 
    } 
    exit; 
} 
//获取文件类型后缀 
function extend($file_name){ 
    $extend = pathinfo($file_name); 
    $extend = strtolower($extend["extension"]); 
    return $extend; 
} 

在实际项目中，我将内容输出（无论错误信息或最后一个文件路径）返回到原始页面。每次我上传图片时，我都会将图像路径拼接在一起，并写下它们将其保存在隐藏的输入中（直接写入它以获取输入ID值和$（“＃id”）。val（path））。 ，并在提交表单时随附所有信息，以便它可以基于PHP返回的信息确定图像是否成功上传。

以上是多个图片的上传模式。

如果要在每个上传之前清除输入值，请清除输入值，然后将表单提交到背景中。

缺点

此插件不好的一件事是，当您上传错误的图片并再次上传新图片时，原始图片仍将上传到服务器，这存在错误冗余的问题。改进方法可能是用自己编写服务器小程序进行处理，这取决于项目。