鼠标拖拽,自身出手创设ajax图片上传

2019-05-17 作者:web前端   |   浏览(82)

AJAX拖拽上传功能实现,供大家参考,具体内容如下

今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的。于是就自己动手写了一个。

New Document

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .box {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  text-align: center;
  line-height: 300px;
  font-size: 40px;
 }
 </style>
</head>

<body>
 <div class="box"> </div>

 <script>
 var box = document.querySelector('.box');

 box.ondragover = function (e) {
  e.preventDefault();
 }
 box.ondrop = function (e) {
  console.log(e.dataTransfer)
  e.preventDefault();
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
   console.log(xhr.responseText)
  }
  }
  xhr.open('POST', './server.php', true);

  var formdata = new FormData();
  formdata.append('pic', e.dataTransfer.files[0]);
  formdata.append('name', 'luyao');
  xhr.send(formdata);

 }
 </script>
</body>

</html>

方法1,仅使用jquery代码,不用第三方插件。代码如下

drag me

//server.php

<p> 
<label>上传图片</label> 
<input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /> 
<input type="button" id="uploadButton" value="Upload" /> 
</p> 
<script type="text/javascript"> 
$(function() { 
$('.inp_fileToUpload').change(function() { 
var formdata = new FormData(); 
var v_this = $(this); 
var fileObj = v_this.get(0).files; 
url = "/upload/upload_json.ashx"; 
//var fileObj=document.getElementById("fileToUpload").files; 
formdata.append("imgFile", fileObj[0]); 
jQuery.ajax({ 
url : url, 
type : 'post', 
data : formdata, 
cache : false, 
contentType : false, 
processData : false, 
dataType : "json", 
success : function(data) { 
if (data.error == 0) { 
v_this.parent().children(".img_upload").attr("src", data.url); 
//$("#img").attr("src",data.url); 
} 
} 
}); 
return false; 
}); 
}); 
</script>

在绿色方块上按下鼠标,可以将其拖动,在方块的位置靠近某个方框并且方框的边线显示红色时,放开鼠标,方块会自动进入方框,其它位置放开鼠标,方块会返回上一次的位置。

<?php
 $rand = rand(1,1000).'.jpg';
 move_uploaded_file($_FILES['pic']['tmp_name'], './uploads/'.$rand);
 echo '/uploads/'.$rand;

这种方法的缺点:由于IE689不支持formdata,所以这种方法不支持IE9及以下版本

[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

方法二:使用ajaxfileupload.js插件
ajaxfileupload.js
html代码:

您可能感兴趣的文章:

  • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
  • jQuery Ajax 上传文件处理方式介绍(推荐)
  • Jquery ajaxsubmit上传图片实现代码
  • php ajax实现图片文件上传功能实例
  • jQuery Ajax文件上传(php)
  • web前端,自己动手打造ajax图片上传(网上没有的)
  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
  • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
  • ajax实现异步文件或图片上传功能
  • 简单实现ajax拖拽上传文件

您可能感兴趣的文章:

  • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
  • AjaxUI:鼠标拖拽
  • jQuery Ajax 上传文件处理方式介绍(推荐)
  • Jquery ajaxsubmit上传图片实现代码
  • php ajax实现图片文件上传功能实例
  • jQuery Ajax文件上传(php)
  • 自己动手打造ajax图片上传(网上没有的)
  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
  • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
  • ajax实现异步文件或图片上传功能
<p> 
<label>ajax上传</label> 
<input type="file" name="fileToUpload" id="fileToUpload" class="inp_fileToUpload" multiple="multiple"/> 
<img src="$web.site$web.tpl#**#adminht/images/lb_head.jpg" width="30px" height="30px" class="img_upload" id="img" /> 
</p> 
<p> 
<label>最新修改人员:</label> 
<input readonly="readonly" type="text" size="30" /> 
</p> 
<div> 

<script type="text/javascript"> 
$(function() { 
$(".inp_fileToUpload").live("change", function() {//现在这个已经适用于多个file表单。 
ajaxFileUpload($(this).attr("id"), $(this).parent().children(".img_upload").attr("id")); 
}) 
}) 
function ajaxFileUpload(file_id, img_id) { 
jQuery.ajaxFileUpload({ 
url : '/upload/upload_json.ashx', //用于文件上传的服务器端请求地址 
secureuri : false, //是否需要安全协议,一般设置为false 
fileElementId : file_id, //文件上传域的ID 
dataType : 'json', //返回值类型 一般设置为json 
success : function(data, status)//服务器成功响应处理函数 
{ 
if (data.error == 0) { 
$("#"   img_id).attr("src", data.url); 
} else { 
alert(data.message); 
} 
}, 
error : function(data, status, e)//服务器响应失败处理函数 
{ 
alert(e); 
} 
}) 
return false; 
} 
</script> 
</div> 
</div>

说明:这种方法目前测试支持IE8/9,谷歌,兼容比方法1好。建议采用方法2

文件上传后台处理代码(asp.net版)

<%@ webhandler Language="C#" class="Upload" %> 

using System; 
using System.Collections; 
using System.Web; 
using System.IO; 
using System.Globalization; 
using LitJson; 
public class Upload : IHttpHandler 
{ 
private HttpContext context; 
public void ProcessRequest(HttpContext context) 
{ 
String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/")   1); 

//文件保存目录路径 
String savePath = "attached/"; 
//文件保存目录URL 
String saveUrl = aspxUrl   "attached/"; 
//定义允许上传的文件扩展名 
Hashtable extTable = new Hashtable(); 
extTable.Add("image", "gif,jpg,jpeg,png,bmp"); 
extTable.Add("flash", "swf,flv"); 
extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); 
extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); 
//最大文件大小 
int maxSize = 1000000; 
this.context = context; 
HttpPostedFile imgFile = context.Request.Files["imgFile"]; 
if (imgFile == null) 
{ 
showError("请选择文件。"); 
} 
String dirPath = context.Server.MapPath(savePath); 
if (!Directory.Exists(dirPath)) 
{ 
showError("上传目录不存在。"); 
} 
String dirName = context.Request.QueryString["dir"]; 
if (String.IsNullOrEmpty(dirName)) { 
dirName = "image"; 
} 
if (!extTable.ContainsKey(dirName)) { 
showError("目录名不正确。"); 
} 
String fileName = imgFile.FileName; 
String fileExt = Path.GetExtension(fileName).ToLower(); 
if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) 
{ 
showError("上传文件大小超过限制。"); 
} 
if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring(1).ToLower()) == -1) 
{ 
showError("上传文件扩展名是不允许的扩展名。n只允许"   ((String)extTable[dirName])   "格式。"); 
} 
//创建文件夹 
dirPath  = dirName   "/"; 
saveUrl  = dirName   "/"; 
if (!Directory.Exists(dirPath)) { 
Directory.CreateDirectory(dirPath); 
} 
String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo); 
dirPath  = ymd   "/"; 
saveUrl  = ymd   "/"; 
if (!Directory.Exists(dirPath)) { 
Directory.CreateDirectory(dirPath); 
} 
String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo)   fileExt; 
String filePath = dirPath   newFileName; 
imgFile.SaveAs(filePath); 
String fileUrl = saveUrl   newFileName; 
Hashtable hash = new Hashtable(); 
hash["error"] = 0; 
hash["url"] = fileUrl; 
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 
context.Response.Write(JsonMapper.ToJson(hash)); 
context.Response.End(); 
} 
private void showError(string message) 
{ 
Hashtable hash = new Hashtable(); 
hash["error"] = 1; 
hash["message"] = message; 
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 
context.Response.Write(JsonMapper.ToJson(hash)); 
context.Response.End(); 
} 
public bool IsReusable 
{ 
get 
{ 
return true; 
} 
} 
}

您可能感兴趣的文章:

  • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
  • AjaxUI:鼠标拖拽
  • jQuery Ajax 上传文件处理方式介绍(推荐)
  • Jquery ajaxsubmit上传图片实现代码
  • php ajax实现图片文件上传功能实例
  • jQuery Ajax文件上传(php)
  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
  • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
  • ajax实现异步文件或图片上传功能
  • 简单实现ajax拖拽上传文件

本文由www.bifa365365.com发布于web前端,转载请注明出处:鼠标拖拽,自身出手创设ajax图片上传

关键词: www.bifa3653