ajax 异步插入图片到数据库(单图上传)

其实也没啥  如图:

点击按钮选择图片,选择完成后 无需点击确定 ,自动上传到服务器指定文件夹 然后插入到数据库中。

下面来看看这要代码

index.php

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>UploadiFive Test</title><script src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script><script src="jquery.uploadify.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="uploadify.css"><style type="text/css">body {   font: 13px Arial, Helvetica, Sans-serif;}</style></head>

<body>   <h1>Uploadify Demo</h1>   <form action="uploadify.php" method="post">      <div id="queue"></div>      <input id="file_upload" name="tupian" type="file" multiple="true"><!--        <input type="submit" value="上传"/>-->   </form>

   <script type="text/javascript">      <?php $timestamp = time();?>      $(function() {         $(‘#file_upload‘).uploadify({            ‘formData‘     : {               ‘timestamp‘ : ‘<?php echo $timestamp;?>‘,               ‘token‘     : ‘<?php echo md5(‘unique_salt‘ . $timestamp);?>‘            },            ‘swf‘      : ‘uploadify.swf‘,            ‘uploader‘ : ‘uploadify.php‘         });      });   </script></body></html>

上传页面的  uploadifty.php
<?phpinclude("conn.php");/*UploadifyCopyright (c) 2012 Reactive Apps, Ronnie GarciaReleased under the MIT License <http://www.opensource.org/licenses/mit-license.php>*/error_reporting(0);// Define a destination$targetFolder = ‘/DoExercise/uploadify/uplaods‘; // Relative to the root

$verifyToken = md5(‘unique_salt‘ . $_POST[‘timestamp‘]);

if (!empty($_FILES) && $_POST[‘token‘] == $verifyToken) {    $tempFile = $_FILES[‘Filedata‘][‘tmp_name‘];    $targetPath = $_SERVER[‘DOCUMENT_ROOT‘] . $targetFolder;    $targetFile = rtrim($targetPath,‘/‘) . ‘/‘ . $_FILES[‘Filedata‘][‘name‘];

    // Validate the file type    $fileTypes = array(‘jpg‘,‘jpeg‘,‘gif‘,‘png‘); // File extensions    $fileParts = pathinfo($_FILES[‘Filedata‘][‘name‘]);

    if (in_array($fileParts[‘extension‘],$fileTypes)) {        move_uploaded_file($tempFile,$targetFile);        echo ‘1‘;    } else {        echo ‘Invalid file type.‘;    }    $tupian=$_FILES[‘Filedata‘][‘name‘];    $sql="insert into uploadify(tupian) values(‘$tupian‘)";    $query=mysql_query($sql);   if($query>0){       echo "<script>alert(‘上传成功‘)</script>";   }else{

       echo"<script>alert(‘上传失败‘)</script>";   }

}?>
,$fileTypes)) {        move_uploaded_file($tempFile,$targetFile);        echo ‘1‘;    } else {        echo ‘Invalid file type.‘;    }    $tupian=$_FILES[‘Filedata‘][‘name‘];    $sql="insert into uploadify(tupian) values(‘$tupian‘)";    $query=mysql_query($sql);   if($query>0){       echo "<script>alert(‘上传成功‘)</script>";   }else{       echo"<script>alert(‘上传失败‘)</script>";   }}?>

主要就这些玩意  也没啥  东西 需要文件的 找我来哈  认准大白驴。
时间: 2024-10-05 03:55:05

ajax 异步插入图片到数据库(单图上传)的相关文章

Laravel5多图上传和Laravel5单图上传的功能实现

Laravel5文件上传默认只能上传一张图片,但是有的时候我们需要一次性上传多图就不行了,我在网上看了很多关于laravel5图片上传的文章,很多都只是介绍laravel5单图上传,多图片上传介绍少之有少,今天分享一篇关于laravrl5多图上传文章,代码逻辑设计可能不完美,但功能实现了.希望对大家有所帮助! 前端代码: 注意:<input type="file" class="default" name="img[]" /> <

js实现图片预览以及上传

HTML 代码: <input  type="file" id="fileid" onchange="filesize(this)" runat="server" size="80" Width="200px" Height="25px"/>  <input  type="hidden" id="hidden_s&quo

适应各浏览器图片裁剪无刷新上传js插件(转)

看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

在ASP.NET中实现图片、视频文件上传方式

一.图片 1.在前端用<asp:FileUpload ID="UpImgName" runat="server"/>控件 2.在后台.cs中写上 protected void btnSubmit_Click(object sender,EventArgs e) { string strImgPath=string.Empty; string strDateTime=dateTime.Now.Tostring("yyyyMMddhhmmss&qu

【Android实战】----基于Retrofit实现多图片/文件、图文上传

一.再次膜拜下Retrofit Retrofit无论从性能还是使用方便性上都很屌!!!,本文不去介绍其运作原理(虽然很想搞明白),后面会出专题文章解析Retrofit的内部原理:本文只是从使用上解析Retrofit实现多图片/文件.图文上传的功能. 二.概念介绍 1)注解@Multipart 从字面上理解就是与多媒体文件相关的,没错,图片.文件等的上传都要用到该注解,其中每个部分需要使用@Part来注解..看其注释 /** * Denotes that the request body is m

处理带说明信息的图片与处理文件上传 四(62)

一 .处理带说明信息的图片与处理文件上传  void delete()           删除保存在临时目录中的文件.     String getContentType()  获取文档的类型           Returns the content type passed by the browser or null if not defined. String getFieldName() 获取字段的名称,即name=xxxx           Returns the name of

在线修改图片尺寸缩放网站(完美解决图片过大无法上传问题)

在线修改图片尺寸缩放网站(完美解决图片过大无法上传问题) http://pic.sdodo.com/tool/picadjust/ http://www.zhengzong.cn/bbsxp/thread-8136-1-1.html 一次使用windows xp用头像是用到 因头像尺寸标准为48*48 Look! 成功修改的小猫咪! Windows Xp / 2003用户头像位置 C:\Documents and Settings\All Users\Application Data\Micro

webuploder插件单图上传与删除上传文件DEMO

第一篇博客,不好请勿怪! 言归正传,最近一段时间一直在用webuploader这个插件,这是一个无刷新上传的插件,开它的简介说明,是百度开发的小工具,用了小半年了,个人感觉是比较全面的. 但是一直有个问题没有解决,等待上传的图片尤其是已经上传的图片,我发现上传错误了,重新选择正确的图片上传.但之前错误的图片文件还是会留在服务器上,这样长期以往下来,对于服务器的空间使用肯定是严重的灾难,所以就想在这个插件中有没有实现删除上传图片的功能,看了很久的官方API手册,发现只有删除待上传文件队列(可能是我

小程序base64图片解析成流上传服务器

/** * * @Title: decodeBase64ToImage * @Description: (將base64位的图片解码成流 上传到阿里云服务器) * @param base64 图片的64进制码 * @param path 图片的本地生成地址 * @param imgName 图片名称 * @param uppath 图片的oss远程地址 * @param imgName void (这里描述输出参数的作用) * @throws * @author huyuhang * @date