js achieve ctrl + v to paste and upload pictures

Then just learned how to share a small stuff: Chat achieve ctrl + v to paste and upload pictures, effective pro-test (currently only paste the screenshot QQ micro letter or upload pictures directly on the desktop and then copy and paste invalid, then go into the future) , following on the code

Front page:

<textarea class="scroll" id="text" placeholder="在此输入..."></textarea>

<script type="text/javascript">
document.querySelector("#text").addEventListener("paste", function(e){
//添加监听paste事件
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
if ( !(e.clipboardData && e.clipboardData.items) ) {
return ;
}
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" && cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" && ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
return;
}
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
var data = new FormData();
data.append("blob", blob);
$.ajax({
url : "/user/uploads",
type : 'POST',
cache : false,
data : data,
processData : false,
contentType : false,
success : function(result){
if(result.state == "1"){
console.log(result.msg)
var html = "<img src='"+result.fileAddress+"' width='200' height='200'>";
$("#text").val(html);
$("#submit").trigger("click");// simulate a click button is transmitted directly after the paste the console.log (result.msg)
} the else IF (result.state == "2") {

IF the else} (result.state == ". 3") {
the console.log (result.msg)
}
}
});
}
}
}, to false)
</ Script>
rear upload method:

@RequestMapping (value = "/ uploads", Produces + = MediaType.APPLICATION_JSON_VALUE "; charset = UTF-. 8")
@ResponseBody
public String uploads (@RequestParam (value = "BLOB", required to false =) a MultipartFile BLOB, the HttpServletRequest Request) {
/ **
* write directly into the reference parameter MultipartFile blob acquisition is null, the specific cause is not clear
* Another idea is the matter into the reference parameter names and parameter names to pass in front of the value corresponding to the above example (blob), or not to receive to parameter
* /
the jSONObject jsonObject the jSONObject new new = ();
(! blob.isEmpty ()) {IF
IF (blob.getSize ()> = 5242880) {
jsonObject.accumulate ( "State", ". 3");
jsonObject.accumulate ( "msg", "Please upload the files smaller than 5M!");
} {the else
the SimpleDateFormat the SimpleDateFormat SDF new new = ( "yyyyMMddHHmmsssss");
String ID = sdf.format (new new a Date ());
String path = request.getSession().getServletContext().getRealPath("/uploads");
String filename = blob.getOriginalFilename();
String[] endfilename = filename.split("\\.");
String finalname = id + "." + endfilename[endfilename.length-1];
File filepath = new File(path, finalname);
if(!filepath.getParentFile().exists()){
filepath.getParentFile().mkdirs();
}
try {
blob.transferTo(new File(path + File.separator + finalname));
jsonObject.accumulate("state", "1");
jsonObject.accumulate("msg", "上传成功!");
jsonObject.accumulate("fileAddress", "/uploads/"+finalname);
} catch (Exception e) {
e.printStackTrace();
}
}
}else{
jsonObject.accumulate("state", "2");
}
return JsonUtils.objectToJson(jsonObject);
}
GAME OVER,功能实现~
--------------------- 

Guess you like

Origin www.cnblogs.com/hyhy904/p/10995873.html